Skip to content

Soracom

Design System
Home Design System Elements Card

Card

Options 

Basic usage 

<div class="ds-card">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-card">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>

Small 

<div class="ds-card --small">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-card --small">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>

Visual states 

<div class="ds-card --alert">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
<div class="ds-card --info">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-card --alert">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
<div class="ds-card --info">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>

Component color 

Card supports component color classes.

<div class="ds-card --color-magenta">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
<div class="ds-card --color-magenta-lightest">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-card --color-magenta">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
<div class="ds-card --color-magenta-lightest">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
<div class="ds-card">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
  <div class="__footer">
    <span>Footer</span>
    <i class="ds-icon --icon-arrow-right"></i>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-card">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
  <div class="__footer">
    <span>Footer</span>
    <i class="ds-icon --icon-arrow-right"></i>
  </div>
</div>

Styles 

Custom styles exist for specific use cases.

Default style 

Example inside ds-cols with card limited to 3 width
<div class="ds-cols --4">
  <div class="ds-card">
    <img src="assets/sample.jpg"/>
    <div class="ds-heading --large">Text Content</div>
    <div class="ds-text --label">Text content</div>
    <div class="ds-text">Text content</div>
    <div class="__footer">
      <span>Footer</span>
      <i class="ds-icon --icon-arrow-right"></i>
    </div>
  </div>
  <div class="ds-card">
    <img src="assets/sample.jpg"/>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-cols --4">
  <div class="ds-card">
    <img src="assets/sample.jpg"/>
    <div class="ds-heading --large">Text Content</div>
    <div class="ds-text --label">Text content</div>
    <div class="ds-text">Text content</div>
    <div class="__footer">
      <span>Footer</span>
      <i class="ds-icon --icon-arrow-right"></i>
    </div>
  </div>
  <div class="ds-card">
    <img src="assets/sample.jpg"/>
  </div>
</div>

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 3 width
<div class="ds-cols --4">
  <div class="ds-card --details">
    <img src="assets/sample.jpg"/>
    <div class="ds-heading --large">Text Content</div>
    <div class="ds-text --label">Text content</div>
    <div class="ds-text">Text content</div>
    <div class="__footer">
      <span>Footer</span>
      <i class="ds-icon --icon-arrow-right"></i>
    </div>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-cols --4">
  <div class="ds-card --details">
    <img src="assets/sample.jpg"/>
    <div class="ds-heading --large">Text Content</div>
    <div class="ds-text --label">Text content</div>
    <div class="ds-text">Text content</div>
    <div class="__footer">
      <span>Footer</span>
      <i class="ds-icon --icon-arrow-right"></i>
    </div>
  </div>
</div>

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
<div class="ds-cols --3 --connected">
  <div class="ds-card --details --success">
    <i class="ds-icon --xxxlarge --icon-sim"></i>
    <div class="ds-heading --large">Sim</div>
    <ul class="ds-list">
      <li class="ds-text"><i class="ds-icon --icon-online-solid --success"></i> Test</li>
    </ul>
    <button class="__footer --label">
      <span>Details</span>
      <i class="ds-icon --icon-arrow-right"></i>
    </button>
  </div>
  <div class="ds-card --details --alert">
    <i class="ds-icon --xxxlarge --icon-session"></i>
    <div class="ds-heading --large">Session</div>
    <ul class="ds-list">
      <li class="ds-text"><i class="ds-icon --icon-online-solid"></i> Test</li>
      <li class="ds-text"><i class="ds-icon --icon-warning"></i> Test</li>
    </ul>
    <button class="__footer --label">
      <span>Details</span>
      <i class="ds-icon --icon-arrow-right"></i>
    </button>
  </div>
  <div class="ds-card --details">
    <i class="ds-icon --xxxlarge --icon-stats"></i>
    <div class="ds-heading --large">Stats</div>
    <ul class="ds-list">
      <li class="ds-text"><i class="ds-icon --icon-online-solid --success"></i> Test</li>
      <li class="ds-text"><i class="ds-icon --icon-online-solid --success"></i> Test</li>
      <li class="ds-text"><i class="ds-icon --icon-online-solid --success"></i> Test</li>
    </ul>
    <button class="__footer --label">
      <span>Details</span>
      <i class="ds-icon --icon-arrow-right"></i>
    </button>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-cols --3 --connected">
  <div class="ds-card --details --success">
    <i class="ds-icon --xxxlarge --icon-sim"></i>
    <div class="ds-heading --large">Sim</div>
    <ul class="ds-list">
      <li class="ds-text"><i class="ds-icon --icon-online-solid --success"></i> Test</li>
    </ul>
    <button class="__footer --label">
      <span>Details</span>
      <i class="ds-icon --icon-arrow-right"></i>
    </button>
  </div>
  <div class="ds-card --details --alert">
    <i class="ds-icon --xxxlarge --icon-session"></i>
    <div class="ds-heading --large">Session</div>
    <ul class="ds-list">
      <li class="ds-text"><i class="ds-icon --icon-online-solid"></i> Test</li>
      <li class="ds-text"><i class="ds-icon --icon-warning"></i> Test</li>
    </ul>
    <button class="__footer --label">
      <span>Details</span>
      <i class="ds-icon --icon-arrow-right"></i>
    </button>
  </div>
  <div class="ds-card --details">
    <i class="ds-icon --xxxlarge --icon-stats"></i>
    <div class="ds-heading --large">Stats</div>
    <ul class="ds-list">
      <li class="ds-text"><i class="ds-icon --icon-online-solid --success"></i> Test</li>
      <li class="ds-text"><i class="ds-icon --icon-online-solid --success"></i> Test</li>
      <li class="ds-text"><i class="ds-icon --icon-online-solid --success"></i> Test</li>
    </ul>
    <button class="__footer --label">
      <span>Details</span>
      <i class="ds-icon --icon-arrow-right"></i>
    </button>
  </div>
</div>