Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. Card

Card

Options

Basic usage

html
Copy

Size

Indent

ds-card supports global indents

html
Copy
html
Copy
html
Copy
html
Copy

Gap

html
Copy

Visual states

html
Copy

Component color

Card supports component color classes.

html
Copy

Loading state

A card can be triggered to display a loading state - where the card contents are hidden, and the replaced by a centered spinning loading icon – without affecting the dimensions of the card.

Additional options are available using Message state

Default

html
Copy

Alternative loading-refresh icon

html
Copy

Custom icon by adding any icon class

html
Copy

Message state

Message state extends and can be used with Loading state. If a card has a data-attribute data-ds-message the card contents are hidden, and replaced by an icon and the text of the data-ds-message.

html
Copy
html
Copy

Loading state with a message

html
Copy

You can set a custom icon

html
Copy

You can set a custom icon, with the loading state animation

html
Copy
html
Copy

Card with close button

html
Copy

Styles

Custom styles exist for specific use cases.

Default style

Example inside ds-cols with card limited to --4 width

html
Copy

Details style

The details style apply some additional styling rules:

  • Card is dark by default
  • All content is centered except ds-list components
  • If the card has the ds-card --success visual state, only the main icon changes color

Example inside ds-cols with card limited to --4 width

html
Copy

Connected style

When cards are placed inside a ds-cols --connected element, they will have visual connectors applied between elements.

The connectors are styled according to the following rules:

  • If a card has no visual state class - the preceding connector be the default solid gray
  • If a card has ds-card --warning - the preceding connector be the default solid gray
  • If a card has ds-card --success - the preceding connector will be solid green
  • If a card has ds-card --alert - the preceding connector will be dashed red, and subsequent cards will be dashed and grayed out
html
Copy

Panel style

Panel style sets a minimum width (260px), height (140px), and adds a hover state shadow.

Minimum example of panel style

html
Copy

Panel style with sample content

html
Copy

Panel style with sample content using no-gap

html
Copy

Panel style with sample content

html
Copy

Uniform style

Cards within a ds-cols container with the ds-cols --uniform class have a consistent minimum width of 320px and dynamically widen to fit available space, or wrap to the next row. Cards share a consistent horizontal grid alignment for each row - so that each element in the card will maintain the same vertical height as it’s adjacent card.

The minimum width can be set by setting the --ds-cols-width CSS variable. For example, to set the minimum width to 300px, add the following style attribute to the card element: style="--ds-cols-width: 200px;"

Cards using uniform style must have a consistent number of child elements. If a specific child element has no content, it should be output as an empty element with no content, and should not be omitted from the DOM.

html
Copy