4.67.0

Card (AI)

AI cards provide a specialized card layout with bold styling options for highlighting AI-powered features.

Demo

API

Tag

Name
<s-card-ai>

Props

Name Value Required Description
span Number (1–12)

Number of the 12 grid columns the card spans inside a .card-container — for example 3 (4 per row), 4 (3 per row), 6 (2 per row), or 12 (full width). When omitted, the card defaults to a quarter width and collapses responsively as space narrows.

Slots

Tag Slot Name Required Value
<span>, <h3>, or <div> header-title Title content for the card header. Styled with orange-darker color by default.
<span> header-badge Badge text displayed in the header area with orange-dark background and white text.
<div> content Main content area for the card body with horizontal padding.
<div> footer Optional footer content with white background, typically includes action buttons or accordion content.

Classes

Value Description
accordion-container Apply this class to a div wrapping accordion elements in the footer slot for proper styling.

Demo

API

Tag

Name
<SCardAi>

Props

Name Value Required Description
span 1 | 2 | … | 12

Number of the 12 grid columns the card spans inside a .card-container — for example 3 (4 per row), 4 (3 per row), 6 (2 per row), or 12 (full width). When omitted, the card defaults to a quarter width and collapses responsively as space narrows.

Slots

Tag Slot Name Required Value
<span>, <h3>, or <div> header-title Title content for the card header. Styled with orange-darker color by default.
<span> header-badge Badge text displayed in the header area with orange-dark background and white text.
<div> content Main content area for the card body with horizontal padding.
<div> footer Optional footer content with white background, typically includes action buttons or accordion content.

Classes

Value Description
accordion-container Apply this class to a div wrapping accordion elements in the footer slot for proper styling.

Skylab React links

General information about using our React package

Design

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