Skip to content

Soracom

Design System
Home Design System Elements Card

Card

stable component-colors visual-state short-class-names

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>

Size 

Indent 

ds-card supports global indents

<div class="ds-card --indent-large">
  <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 --indent-large">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
<div class="ds-card --indent-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 --indent-small">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
<div class="ds-card --indent-xsmall">
  <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 --indent-xsmall">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
<div class="ds-card --no-indent">
  <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 --no-indent">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>

Gap  

<div class="ds-card --gap-xlarge">
  <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 --gap-xlarge">
  <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>

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 
<div class="ds-card --loading">
  <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 --loading">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
Alternative loading-refresh icon 
<div class="ds-card --loading-refresh">
  <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 --loading-refresh">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
Custom icon by adding any icon class 
<div class="ds-card --loading --icon-radar">
  <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 --loading --icon-radar">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>

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.

<div class="ds-card" data-ds-message="Message text">
  <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" data-ds-message="Message text">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
Loading state with a message 
<div class="ds-card --loading" data-ds-message="Message text">
  <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 --loading" data-ds-message="Message text">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
You can set a custom icon 
<div class="ds-card --icon-rocket" data-ds-message="Message text">
  <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 --icon-rocket" data-ds-message="Message text">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
You can set a custom icon, with the loading state animation 
<div class="ds-card --loading --icon-compass" data-ds-message="Message text">
  <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 --loading --icon-compass" data-ds-message="Message text">
  <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>
Example inside ds-cols with card limited to 3 width 
<div class="ds-cols --4">
  <div class="ds-card --indent-large">
    <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 --indent-large">
    <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 --massive --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 --massive --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 --massive --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 --massive --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 --massive --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 --massive --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>

Panel style 

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

Minimum example of panel style 
<div class="ds-card --panel"></div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-card --panel"></div>
Panel style with sample content 
<div class="ds-card --panel --indent-small ds-span --6" href="#">
  <p class="ds-tag --pinned"><span>Recent billing</span></p>
  <a class="ds-cols --middle --highlight">
    <div class="ds-text ds-span --expand">
      <span class="--label">August</span>
      <span class="--uppercase">(Current MTD: 01 - 26 August)</span>
      <i class="ds-icon --icon-arrow-top-right --tiny"></i>
    </div>
    <div class="ds-text">
      <span class="ds-text --icon-coupon">$200</span>
    </div>
    <div class="ds-text --large">11,077 <sup>USD</sup></div>
  </a>
  <hr/>
  <div class="ds-cols --no-gap --spaced --middle">
    <div class="ds-text --label ds-span --12">July</div>
    <div class="ds-heading --huge">1,624 <sup>USD</sup></div>
    <div class="ds-span --center">
      <div class="ds-text  --center --label --icon-coupon --large">$100</div>
      <div class="ds-text --xsmall">Coupon applied</div>
    </div>
  </div>
  <hr/>
  <a class="ds-cols --middle --highlight">
    <div class="ds-text --label ds-span --expand">June<i class="ds-icon --icon-arrow-top-right --tiny"></i></div>
    <div class="ds-text --large">1,811 <sup>USD</sup></div>
  </a>
  <hr/>
  <a class="ds-cols --middle">
    <div class="ds-text --label ds-span --expand">May<i class="ds-icon --icon-arrow-top-right --tiny"></i></div>
    <div class="ds-text --large">1,321 <sup>USD</sup></div>
  </a>
  <footer>
    <p class="ds-text --center --xxsmall --icon-coupon">Totals shown includes savings from coupons</p>
  </footer>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-card --panel --indent-small ds-span --6" href="#">
  <p class="ds-tag --pinned"><span>Recent billing</span></p>
  <a class="ds-cols --middle --highlight">
    <div class="ds-text ds-span --expand">
      <span class="--label">August</span>
      <span class="--uppercase">(Current MTD: 01 - 26 August)</span>
      <i class="ds-icon --icon-arrow-top-right --tiny"></i>
    </div>
    <div class="ds-text">
      <span class="ds-text --icon-coupon">$200</span>
    </div>
    <div class="ds-text --large">11,077 <sup>USD</sup></div>
  </a>
  <hr/>
  <div class="ds-cols --no-gap --spaced --middle">
    <div class="ds-text --label ds-span --12">July</div>
    <div class="ds-heading --huge">1,624 <sup>USD</sup></div>
    <div class="ds-span --center">
      <div class="ds-text  --center --label --icon-coupon --large">$100</div>
      <div class="ds-text --xsmall">Coupon applied</div>
    </div>
  </div>
  <hr/>
  <a class="ds-cols --middle --highlight">
    <div class="ds-text --label ds-span --expand">June<i class="ds-icon --icon-arrow-top-right --tiny"></i></div>
    <div class="ds-text --large">1,811 <sup>USD</sup></div>
  </a>
  <hr/>
  <a class="ds-cols --middle">
    <div class="ds-text --label ds-span --expand">May<i class="ds-icon --icon-arrow-top-right --tiny"></i></div>
    <div class="ds-text --large">1,321 <sup>USD</sup></div>
  </a>
  <footer>
    <p class="ds-text --center --xxsmall --icon-coupon">Totals shown includes savings from coupons</p>
  </footer>
</div>
Panel style with sample content using no-gap 
<div class="ds-card --panel --tiled --indent-small ds-span --6" href="#">
  <p class="ds-tag --pinned"><span>Recent billing</span></p>
  <a class="ds-cols --middle">
    <div class="ds-text ds-span --expand">
      <span class="--label">August</span>
      <span class="--uppercase">(Current MTD: 01 - 26 August)</span>
      <i class="ds-icon --icon-arrow-top-right --tiny"></i>
    </div>
    <div class="ds-text">
      <span class="ds-text --icon-coupon">$200</span>
    </div>
    <div class="ds-text --large">11,077 <sup>USD</sup></div>
  </a>
  <hr/>
  <div class="ds-cols --no-gap --spaced --middle --highlight">
    <div class="ds-text --label ds-span --12">July</div>
    <div class="ds-heading --huge">1,624 <sup>USD</sup></div>
    <div class="ds-span --center">
      <div class="ds-text  --center --label --icon-coupon --large">$100</div>
      <div class="ds-text --xsmall">Coupon applied</div>
    </div>
  </div>
  <hr/>
  <a class="ds-cols --middle">
    <div class="ds-text --label ds-span --expand">June<i class="ds-icon --icon-arrow-top-right --tiny"></i></div>
    <div class="ds-text --large">1,811 <sup>USD</sup></div>
  </a>
  <hr/>
  <a class="ds-cols --middle">
    <div class="ds-text --label ds-span --expand">May<i class="ds-icon --icon-arrow-top-right --tiny"></i></div>
    <div class="ds-text --large">1,321 <sup>USD</sup></div>
  </a>
  <footer>
    <p class="ds-text --center --xxsmall --icon-coupon">Totals shown includes savings from coupons</p>
  </footer>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-card --panel --tiled --indent-small ds-span --6" href="#">
  <p class="ds-tag --pinned"><span>Recent billing</span></p>
  <a class="ds-cols --middle">
    <div class="ds-text ds-span --expand">
      <span class="--label">August</span>
      <span class="--uppercase">(Current MTD: 01 - 26 August)</span>
      <i class="ds-icon --icon-arrow-top-right --tiny"></i>
    </div>
    <div class="ds-text">
      <span class="ds-text --icon-coupon">$200</span>
    </div>
    <div class="ds-text --large">11,077 <sup>USD</sup></div>
  </a>
  <hr/>
  <div class="ds-cols --no-gap --spaced --middle --highlight">
    <div class="ds-text --label ds-span --12">July</div>
    <div class="ds-heading --huge">1,624 <sup>USD</sup></div>
    <div class="ds-span --center">
      <div class="ds-text  --center --label --icon-coupon --large">$100</div>
      <div class="ds-text --xsmall">Coupon applied</div>
    </div>
  </div>
  <hr/>
  <a class="ds-cols --middle">
    <div class="ds-text --label ds-span --expand">June<i class="ds-icon --icon-arrow-top-right --tiny"></i></div>
    <div class="ds-text --large">1,811 <sup>USD</sup></div>
  </a>
  <hr/>
  <a class="ds-cols --middle">
    <div class="ds-text --label ds-span --expand">May<i class="ds-icon --icon-arrow-top-right --tiny"></i></div>
    <div class="ds-text --large">1,321 <sup>USD</sup></div>
  </a>
  <footer>
    <p class="ds-text --center --xxsmall --icon-coupon">Totals shown includes savings from coupons</p>
  </footer>
</div>
Copyright © 2015-2023 Soracom, Inc.
Last page update: January 19, 2023
ad22edcd