Card (navigation)
Navigation cards enable navigation to other pages when a card is selected.
Demo
Add a brief description or supporting details about the topic.
Footer text
Add a brief description or supporting details about the topic.
Footer text
API
Tag
| Name |
<s-card-navigation>
|
Props
| Name | Value | Required | Description |
src |
String | Card link URL. |
Slots
| Tag | Slot Name | Required | Value | Example |
|---|---|---|---|---|
<img> or <svg> |
media |
<img src="image-url" slot="media" alt="descriptive text" /> |
||
<div> |
description |
<div slot="description">Add a brief description or supporting details about the topic.</div> |
||
<s-tag> or <s-badge> |
status |
<s-badge slot="status" count="1" aria-label="1 unread message"></s-badge> |
||
<span> |
footerText |
<span slot="footerText">Short text</span> |
Classes
| Value | Description |
div.card-container |
Add this class to the parent of all cards to enable responsive behavior. |
Demo
API
Tag
| Name |
<SCardNavigation>
|
Props
| Name | Value | Required | Description |
src |
String | Card link URL. |
Slots
| Tag | Slot Name | Required | Value | Example |
|---|---|---|---|---|
<img> or <svg> |
media |
<img src="image-url" slot="media" alt="descriptive text" /> |
||
<div> |
description |
<div slot="description">Add a brief description or supporting details about the topic.</div> |
||
<STag> or <SBadge> |
status |
<SBadge slot="status" count="1" aria-label="1 unread message"></SBadge> |
||
<span> |
footerText |
<span slot="footerText">Short text</span> |
Classes
| Value | Description |
div.card-container |
Add this class to the parent of all cards to enable responsive behavior. Cards can also be placed using the grid. |
Skylab React links
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com