Skip to content
MENU

Soracom

Design System

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>
<div class="ds-card">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
  <div class="ds-card__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="ds-card__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 --3">
  <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="ds-card__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 --3">
  <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="ds-card__footer">
      <span>Footer</span>
      <i class="ds-icon --icon-arrow-right"></i>
    </div>
  </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 --3">
  <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="ds-card__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 --3">
  <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="ds-card__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 ds-card--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="ds-card__footer --label">
      <span>Details</span>
      <i class="ds-icon --icon-arrow-right"></i>
    </button>
  </div>
  <div class="ds-card--details ds-card--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="ds-card__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="ds-card__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 ds-card--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="ds-card__footer --label">
      <span>Details</span>
      <i class="ds-icon --icon-arrow-right"></i>
    </button>
  </div>
  <div class="ds-card--details ds-card--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="ds-card__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="ds-card__footer --label">
      <span>Details</span>
      <i class="ds-icon --icon-arrow-right"></i>
    </button>
  </div>
</div>