Soracom

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

Card

Options

Basic usage

html
Copy 
<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

html
Copy 
<div class="ds-card --indent-large">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
html
Copy 
<div class="ds-card --indent-small">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
html
Copy 
<div class="ds-card --indent-xsmall">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>
html
Copy 
<div class="ds-card --no-indent">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>

Gap

html
Copy 
<div class="ds-card --gap-xlarge">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>

Visual states

html
Copy 
<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.

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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.

html
Copy 
<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>
html
Copy 
<div class="ds-card" data-ds-message="Longer message text that will wrap over several lines. Longer message text that will wrap over several lines.">
  <div class="ds-text --label">Text content</div>
  <div class="ds-text">Text content</div>
</div>

Loading state with a message

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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>
html
Copy 
<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>

Card with close button

html
Copy 
<div class="ds-card">
  <p class="ds-tag --pinned"><span>Recent billing</span></p>
  <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>
  <button class="ds-button --primary --small __close">
    <span>Close</span>
  </button>
</div>

Styles

Custom styles exist for specific use cases.

Default style

Example inside ds-cols with card limited to 3 width

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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
html
Copy 
<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

html
Copy 
<div class="ds-card --panel"></div>

Panel style with sample content

html
Copy 
<div class="ds-card --panel --indent-small ds-span --6">
  <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

html
Copy 
<div class="ds-card --panel --tiled --indent-small ds-span --6">
  <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>

Minimum example of panel style

html
Copy 
<a class="ds-card --panel"></a>

Panel style with sample content

html
Copy 
<a billingpanel="" href="/billings/billing_dashboard" class="--indent-small --panel ds-card">
  <p class="ds-tag --pinned"><span>Billing</span></p>
  <div userconsolelatestbilling="" class="ds-rows --no-gap">
    <div class="ds-cols --spaced --middle">
      <div>
        <div class="ds-text --uppercase --xxsmall --icon-japan --color-celeste-dark"><strong>Japan Coverage</strong> – Billing this month</div>
        <div class="ds-heading --xxlarge"> 11,930,077 <sup class="x-billing-currency">JPY</sup></div>
      </div>
      <div>
        <div class="ds-text --uppercase --xxsmall --icon-coverage --color-celeste-dark"><strong>Global Coverage</strong> – Billing this month</div>
        <div class="ds-heading --xxlarge"> 54,654.00 <sup class="x-billing-currency">USD</sup></div>
      </div>
    </div>
  </div>
  <hr>
  <div userconsolebillinghistory="" class="ds-rows --gap-xsmall">
    <div class="ds-cols --xspaced --middle --4">
      <div class="ds-text --uppercase --xxsmall --icon-calendar-dates --color-celeste-dark">Previous months billing</div>
      <div class="ds-text --uppercase --xxsmall --right --color-ink-tint --icon-japan">Japan</div>
      <div class="ds-text --uppercase --xxsmall --right --color-ink-tint --icon-coverage">Global</div>
    </div>
    <div class="ds-cols --xspaced --middle --4">
      <div class="ds-text --label">2023-09</div>
      <div class="ds-text --large --right">8,567,221 <sup>JPY</sup></div>
      <div class="ds-text --large --right">63,334.01 <sup>USD</sup></div>
    </div>
    <div class="ds-cols --xspaced --middle --4">
      <div class="ds-text --label">2023-08</div>
      <div class="ds-text --large --right">9,230,180 <sup>JPY</sup></div>
      <div class="ds-text --large --right">40,442.99 <sup>USD</sup></div>
    </div>
  </div>
  <footer class="ds-text --xxsmall"> Calculated at 2023-10-02 04:12:52 (UTC+08:00). Amounts include coupons, free tier and any applicable taxes.
  </footer>
</a>