Card (navigation)

Navigation cards enable navigation to other pages when a card is selected.

Demo

API

Tag

Name
`<s-card-navigation>`

Props

Name	Value	Required	Description
`src`	String		Card link URL.
`navHandler`	NavHandler function		Function to handle in-app navigation, see Guidelines below.

Slots

Tag	Slot Name	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.
`navHandler`	NavHandler function		Function to handle in-app navigation, see Guidelines below.

Slots

Tag	Slot Name	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

General information about using our React package

Guidelines

Nav handler

You can provide a navHandler function to manage routing. On any click of the card navigation element, the navHandler will be invoked with two arguments: the mouse click event and the value of the src attribute.

The typical implementation will include a conditional to determine if the URL is within the consumer's SPA and invocation of that SPA's router function (e.g. history.push in react-router) if so.

Sample usage is shown below:

function handleNavigation(nativeMouseEvent, url) { // handle Navigation here } document.querySelector('s-card-navigation').navHandler = handleNavigation;

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com