No Preview

Sorry, but you either have no stories or none are selected somehow.

Please check the Storybook config.
Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Cards

For displaying information.

Example

Card components must have a Card element to display styling and CardBody for spacing to display correctly. The rest of the components can be mixed and matched.

Card Header

Card Title

Card Subtitle

The cards text is included here. This can help to create a large part of the cards content.

CardBody

Use this to space content evenly inside a Card.

The cards text is included here. This can help to create a large part of the cards content.

CardTitle and CardSubtitle

Use these to add titles to your Card components.

Card Title

Card Subtitle

The cards text is included here. This can help to create a large part of the cards content.

CardImg

Final use case aligns any image into the card. The CardImg component needs to be placed within a Card component.

Card Title

Card Subtitle

The cards text is included here. This can help to create a large part of the cards content.

Usage

import { Card, CardBody } from "ui-neu"


<Card>
  <CardBody>An imported card.</CardBody>
</Card>

Props

Props for each of the components are included below. This is still under development and changes are anticipated to occur in upcoming releases.

Card

Name	Description	Default
children	Card will take a child prop but should only be passed sub components string	-

CardHeader

Name	Description	Default
children	Pass children to input text into the CardHeader. string	-

CardBody

Name	Description	Default
children	Pass children pass text into the Card content. string	-

CardTitle

Name	Description	Default
children	Pass children to include text. string	-

CardSubtitle

Name	Description	Default
children	Pass children to include text. string	-

CardText

Name	Description	Default
children	Pass children to include text. string	-

CardImg

Name	Description	Default
alt	Enter alt text for accessibility string	-
src	Enter an image source for the card string	-