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