Options
Basic usage
<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>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>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>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
<div class="ds-card --loading">
<div class="ds-text --label">Text content</div>
<div class="ds-text">Text content</div>
</div><div class="ds-card --loading-refresh">
<div class="ds-text --label">Text content</div>
<div class="ds-text">Text content</div>
</div><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><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><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><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>Footer
<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
<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-listcomponents - If the card has the
ds-card --successvisual state, only the main icon changes color
<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>Panel style
Panel style sets a minimum width (260px), height (140px), and adds a hover state shadow.
<div class="ds-card --panel"></div>