Card

Headless Accelerator's cards provide a flexible and extensible content container with multiple variants and options. Basic structure is <uxf-card> with <uxf-card-body> inside.

About

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Basic Card

Basic Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Title and Subtitle

Basic Card with Title and Subtitle

Card TitleCard SubtitleSome quick example text to build on the card title and make up the bulk of the card's content.Go somewhere

Web Component

<uxf-card style="width: 18rem">    <uxf-card-body>        <uxf-card-title>Card Title</uxf-card-title>        <uxf-card-subtitle>Card Subtitle</uxf-card-subtitle>        <uxf-card-text>            Some quick example text to build on the card title and make up the bulk of the card's content.        </uxf-card-text>        <uxf-button style="margin-top: 5px" variant="primary">Go somewhere</uxf-button>    </uxf-card-body></uxf-card>

React

<UxfCard style={{width: '18rem'}}>    <UxfCardBody>        <UxfCardTitle>Card Title</UxfCardTitle>        <UxfCardSubtitle>Card Subtitle</UxfCardSubtitle>        <UxfCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</UxfCardText>        <UxfButton style={{marginTop: '5px'}} variant="primary">Go somewhere</UxfButton>    </UxfCardBody></UxfCard>

Angular

<uxf-card style="width: 18rem">    <uxf-card-body>        <uxf-card-title>Card Title</uxf-card-title>        <uxf-card-subtitle>Card Subtitle</uxf-card-subtitle>        <uxf-card-text>            Some quick example text to build on the card title and make up the bulk of the card's content.        </uxf-card-text>        <uxf-button style="margin-top: 5px" variant="primary">Go somewhere</uxf-button>    </uxf-card-body></uxf-card>

Header and Footer

Header

Card TitleCard SubtitleSome quick example text to build on the card title and make up the bulk of the card's content.

Footer

Web Component

<uxf-card>    <div slot="header">Header</div>    <uxf-card-body>        <uxf-card-title>Card Title</uxf-card-title>        <uxf-card-subtitle>Card Subtitle</uxf-card-subtitle>                Some quick example text to build on the card title and make up the bulk of the card's content.    </uxf-card-body>    <div slot="footer">Footer</div></uxf-card>

React

<UxfCard>    <div slot="header">Header</div>    <UxfCardBody>        <UxfCardTitle>Card Title</UxfCardTitle>        <UxfCardSubtitle>Card Subtitle</UxfCardSubtitle>                Some quick example text to build on the card title and make up the bulk of the card's content.    </UxfCardBody>    <div slot="footer">Footer</div></UxfCard>

Angular

<uxf-card>    <div slot="header">Header</div>    <uxf-card-body>        <uxf-card-title>Card Title</uxf-card-title>        <uxf-card-subtitle>Card Subtitle</uxf-card-subtitle>                Some quick example text to build on the card title and make up the bulk of the card's content.    </uxf-card-body>    <div slot="footer">Footer</div></uxf-card>

Color Variations

Cards include various options for customizing their backgrounds, borders, and color.

Header

Primary card titleSome quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card titleSome quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card titleSome quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card titleSome quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card titleSome quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card titleSome quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card titleSome quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card titleSome quick example text to build on the card title and make up the bulk of the card's content.

Header

Default Chromeless cardSome quick example text to build on the card title and make up the bulk of the card's content.

Card Image

Image Inside Card

Image top

Some quick example text to build on the card title and make up the bulk of the card's content.

Chromeless

Image Top Chromeless Card Example

Some quick example text to build on the card title and make up the bulk of the card's content.

Chromeless with Button

Image Top Chromeless Card with Button Example

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Web Component

<uxf-card>    <uxf-card-image slot="top" src="https://source.unsplash.com/random/286x180"></uxf-card-image>    <uxf-card-body>    Some quick example text to build on the card title and make up the bulk of the card's content.    </uxf-card-body></uxf-card>

React

<UxfCard>    <UxfCardImage slot="top" src="https://source.unsplash.com/random/286x180"></UxfCardImage>    <UxfCardBody>    Some quick example text to build on the card title and make up the bulk of the card's content.    </UxfCardBody></UxfCard>

Angular

<uxf-card>    <uxf-card-image slot="top" src="https://source.unsplash.com/random/286x180"></uxf-card-image>    <uxf-card-body>    Some quick example text to build on the card title and make up the bulk of the card's content.    </uxf-card-body></uxf-card>

Image Bottom

Card TitleCard SubtitleSome quick example text to build on the card title and make up the bulk of the card's content.

Web Component

<uxf-card>    <uxf-card-image slot="bottom" src="https://source.unsplash.com/random/286x180"></uxf-card-image>     <uxf-card-body>        <uxf-card-title>Card Title</uxf-card-title>        <uxf-card-subtitle>Card Subtitle</uxf-card-subtitle>        Some quick example text to build on the card title and make up the bulk of the card's content.    </uxf-card-body></uxf-card>

React

<UxfCard>    <UxfCardImage slot="bottom" src="https://source.unsplash.com/random/286x180"></UxfCardImage>    <UxfCardBody>        <UxfCardTitle>Card Title</UxfCardTitle>        <UxfCardSubtitle>Card Subtitle</UxfCardSubtitle>        Some quick example text to build on the card title and make up the bulk of the card's content.    </UxfCardBody></UxfCard>

Angular

<uxf-card>    <uxf-card-image slot="bottom" src="https://source.unsplash.com/random/286x180"></uxf-card-image>     <uxf-card-body>        <uxf-card-title>Card Title</uxf-card-title>        <uxf-card-subtitle>Card Subtitle</uxf-card-subtitle>        Some quick example text to build on the card title and make up the bulk of the card's content.    </uxf-card-body></uxf-card>

Image Hover

Zoom In

Some quick example text to build on the card title and make up the bulk of the card's content.

Cinematic

Some quick example text to build on the card title and make up the bulk of the card's content.

Web Component

<!-- zoomIn on hover --><uxf-card>    <uxf-card-image zoomin slot="top" src="https://source.unsplash.com/random/286x180">    </uxf-card-image>        <uxf-card-body>    Some quick example text to build on the card title and make up the bulk of the card's content.    </uxf-card-body></uxf-card>
<!-- cinematic effect on hover --><uxf-card>    <uxf-card-image cinematic slot="top" src="https://source.unsplash.com/random/286x180">    </uxf-card-image>        <uxf-card-body>    Some quick example text to build on the card title and make up the bulk of the card's content.    </uxf-card-body></uxf-card>

React

{/* zoomIn on hover */}<UxfCard>    <UxfCardImage zoomin slot="top" src="https://source.unsplash.com/random/286x180"></UxfCardImage>    <UxfCardBody>    Some quick example text to build on the card title and make up the bulk of the card's content.    </UxfCardBody></UxfCard>
{/*cinematic effect on hover*/}<UxfCard>    <UxfCardImage cinematic slot="top" src="https://source.unsplash.com/random/286x180"></UxfCardImage>    <UxfCardBody>    Some quick example text to build on the card title and make up the bulk of the card's content.    </UxfCardBody></UxfCard>

Angular

<!-- zoomIn on hover --><uxf-card>    <uxf-card-image zoomin slot="top" src="https://source.unsplash.com/random/286x180">    </uxf-card-image>        <uxf-card-body>    Some quick example text to build on the card title and make up the bulk of the card's content.    </uxf-card-body></uxf-card>
<!-- cinematic effect on hover --><uxf-card>    <uxf-card-image cinematic slot="top" src="https://source.unsplash.com/random/286x180">    </uxf-card-image>        <uxf-card-body>    Some quick example text to build on the card title and make up the bulk of the card's content.    </uxf-card-body></uxf-card>