## Feature Examples ### Structure - description:

Card layouts can vary, but they can include up to four related components:

    • - example: ```jsx Card content ; ``` ### Header - description:

    The communicates what the card is about. It can include three elements:

  • title
  • subtitle
  • suffix

    • The suffix can be a button or toggle component.

    - example: ```jsx Suffix} > ; ``` ### Section header - description:

    The divides card content into scannable sections. It can include two elements:

  • title
  • suffix

    • Find more information in story.

    - example: ```jsx Suffix} > ; ``` ### Content - description:

    Cards can support any type of content. For example, text, radio buttons, and tables all can be used in cards as child components.

    - example: ```jsx Content ; ``` ### Divider - description:

    Dividers separate different content sections within cards.

    When there's no , use a divider to separate the header from other content.

    - example: ```jsx ; ``` ### Controls - description:

    Add the (with a default or a help icon) to cards using the controls prop.

    - example: ```jsx }> ; ``` ### Hide overflow - description:

    Clip card content into specific card dimensions with the hideOverflow prop.

    Apply this property when a card contains overflowing components inside, like a scrollable table.

    - example: ```jsx ; ``` ### Stretch vertically - description:

    To make cards expand vertically to fit more content, use the stretchVertically prop.

    - example: ```jsx Default With stretchVertically ; ``` ### Show shadow - description:

    To highlight a card with no header or subheader, use the showShadow prop. This is most commonly used in widgets.

    - example: ```jsx ; ``` ## Common Use Case Examples ### Form layouts - description:

    Use a card to group related form elements into a single layout.

    - example: ```jsx () => { const options = [ { id: 0, value: 'Online Store' }, { id: 1, value: 'Other' }, ]; return ( Add Item For best results, upload a high resolution image. Add Logo ); }; ``` ### Collapsable cards - description:

    Collapse and expand card content with the collapse mechanism.

    The , and components can trigger collapse and expand actions.

    - example: ```jsx () => { const [open, setOpen] = React.useState(true); const [radio, setRadio] = React.useState(1); return ( setOpen(!open)} size="medium" checked={open} /> } /> 20 15 10 ); }; ``` ### Widgets - description:

    Cards can be used as widgets within grids or custom layouts. To highlight one card, use the showShadow property.

    These cards usually don't include headers or section headers.

    - example: ```jsx () => { const CustomCard = ({ title, suggested = false }) => { const [hovered, setHovered] = React.useState(false); return (
    setHovered(true)} onMouseLeave={() => setHovered(false)} > {suggested && ( SUGGESTED FOR YOU )} {title}
    ); }; return ( ); }; ``` ### Marketing layouts - description:

    should always be wrapped inside a card.

    - example: ```jsx Start Now} size="tiny" badge={Essential} image={ } /> ; ``` ### Empty states - description:

    If there's no content to display, add an component to guide users forward.

    - example: ```jsx }> Add Product } /> }> Add Product ; ```