CSC Design System next

Vue

Flavour

Vue

React

Angular

TypeScript

Primary

CSC UI Colors

Primary

Secondary

Accent

Custom Colors

Red

Orange

Green

Blue

Purple

Pink

Guides

Getting started

Customization

Data visualization

Migration guide

Components

c-accordion

c-alert

c-autocomplete

c-badge

c-button

c-button-group

c-card

c-checkbox

c-csc-logo

c-data-table

c-divider

c-icon

c-icon-button

c-input

c-link

c-list

c-loader

c-login-buttons

c-login-card

c-main

c-menu

c-message

c-modal

c-navigation-button

c-otp-input

c-page

c-pagination

c-popover

c-progress-bar

c-progress-circle

c-radio-group

c-select

c-side-navigation

c-slider

c-spinner

c-status

c-steps

c-switch

c-table

c-tabs

c-tags

c-text-field

c-toasts

c-toolbar

c-tooltip

`<c-csc-logo>`

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div class="example-row">
    <c-csc-logo />

    <c-csc-logo width="120" />
  </div>
</template>

API reference

`<c-csc-logo>`

Properties

Property	Attribute	Type	Default	Description
`width`	`width`	`number`	`60`	Logo width in pixels

CSS parts

Style from outside with c-csc-logo::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The `<svg>` element rendering the CSC logo