`<c-card>`

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-card>
      <c-card-title>Project members</c-card-title>

      <c-card-content>
        <p>Manage who has access to this project and what they can do.</p>
      </c-card-content>

      <c-card-actions justify="end">
        <c-button text>Cancel</c-button>

        <c-button>Save</c-button>
      </c-card-actions>
    </c-card>
  </div>
</template>

Basic · c-card-title

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-card>
      <c-card-title>
        Notifications
        <c-button slot="actions" ghost size="small">Mark all read</c-button>
      </c-card-title>

      <c-card-content>
        <p>You have 3 unread notifications.</p>
      </c-card-content>
    </c-card>
  </div>
</template>

API reference

`<c-card>`

Properties

Property	Attribute	Type	Default	Description
`fullscreen`	`fullscreen`	`boolean`	`false`	Enable the fullscreen toggle button

Methods

Method	Signature	Description
`enterFullscreen`	`()`	Enter fullscreen from the outside
`exitFullscreen`	`()`	Exit fullscreen from the outside

Slots

Slot	Description
`default`	Card components

CSS parts

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

Part	Description
`root`	The card's visible surface, carries the background, border, radius, shadow and section spacing
`fullscreen-toggle`	The circular fullscreen toggle button shown when the fullscreen prop is set

`<c-card-title>`

Slots

Slot	Description
`default`	Card title text
`actions`	Action controls shown to the right of the title

CSS parts

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

Part	Description
`root`	The outer header element carrying the title typography and padding
`header`	The wrapper around the heading and its underline
`heading`	The paragraph holding the slotted title text
`underline`	The decorative accent bar under the heading
`actions`	The wrapper around the slotted action controls

`<c-card-content>`

Slots

Slot	Description
`default`	Card contents

CSS parts

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

Part	Description
`root`	The padded wrapper stacking the slotted content vertically

`<c-card-actions>`

Properties

Property	Attribute	Type	Default	Description
`align`	`align`	`CCardActionsAlign`	`'center'`	Align the actions
`justify`	`justify`	`CCardActionsJustify`	`'start'`	Justify the actions

Slots

Slot	Description
`default`	Card actions

CSS parts

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

Part	Description
`root`	The padded footer wrapping the actions row
`actions`	The flex row laying out the slotted action elements

Types

Importable from the package root: import type { … } from '@cscfi/csc-ui'

`CCardActionsAlign`

Cross-axis alignment of the slotted actions within the row.

export type CCardActionsAlign = 'center' | 'end' | 'start';

`CCardActionsJustify`

Main-axis distribution of the slotted actions. `stretch` makes every action grow to fill the row.

export type CCardActionsJustify =
  | 'center'
  | 'end'
  | 'space-around'
  | 'space-between'
  | 'start'
  | 'stretch';

`CCardActionsProps`

export interface CCardActionsProps {
  /**
   * Align the actions
   *
   * @seeded from csc-ui — verify
   */
  align?: CCardActionsAlign;
  /**
   * Justify the actions
   *
   * @seeded from csc-ui — verify
   */
  justify?: CCardActionsJustify;
}