Card (AI)
AI cards provide a specialized card layout with bold styling options for highlighting AI-powered features.
Demo
Use styling classes
Add the .bold-content class to the card element to use a bold content style with a background pattern.
This can also be used in conjunction with the .bold-header class.
Remember to wrap the accordion content in a div with the class "accordion-container".
The default background is a light orange gradient with a subtle pattern.
The default header does not have a background color or border.
The footer is optional and can be omitted if not needed.
API
Tag
| Name |
<s-card-ai>
|
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 |
bold-content |
Apply this class to the card element to display a bold background pattern across the content area. |
bold-header |
Apply this class to the card element to use a bold header style with white text on an orange-dark
background. Can be combined with bold-content. |
accordion-container |
Apply this class to a div wrapping accordion elements in the footer slot for proper styling. |
Demo
API
Tag
| Name |
<SCardAi>
|
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 |
bold-content |
Apply this class to the card element to display a bold background pattern across the content area. |
bold-header |
Apply this class to the card element to use a bold header style with white text on an orange-dark
background. Can be combined with bold-content. |
accordion-container |
Apply this class to a div wrapping accordion elements in the footer slot for proper styling. |
Skylab React links
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com