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

Manifest

The component manifest describes this component's API — its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.

Latest version: https://assets.soracom.io/sds/latest/ds-card/index.mjs

index.mjs
Copy