@navinc/base-react-components
Version:
Nav's Pattern Library
73 lines (59 loc) • 1.8 kB
Markdown
The above are just suggested layouts and examples of how the card can be used. Customize at your own discretion.
You'll want to use `<AnimateHeight>` Whenever the content of the card may change and cause the height of
the card to change. Ei: Error messages, collapsable content, etc.
---
**Card: Persistent**
```js
import Card from '../../base-componets'
...
<StandardCard>
<AnimateHeight> // Optional
<Banner title='Yo dawg' copy='You done messed up this time' type='error' /> // Optional
<StandardCard.Header label='Card label' title='Card Title' />
Body content goes here!
</AnimateHeight>
<StandardCard.Footer
actionLabel='Next'
onAction={() => {}}
actionHref='/place'
onBack={() => {}}
backHref='/the-past'
>
<Button>Optional Additional Button</Button>
</StandardCard.Footer>
</StandardCard>
```
**Card: Focused**
```js
<StandardCard isFocused>
<Banner title='Yo dawg' copy='You done messed up this time' type='error' />
<StandardCard.Header title='Hello' />
<StandardCard.FocusedContent>
<img src='some-dope-illustration' />
Body content goes here!
</StandardCard.FocusedContent>
<StandardCard.Footer {...} />
</StandardCard>
```
**Card: Conditional**
```js
<StandardCard>
<StandardCard.Header title='This card is conditional yo!' />
<DivThatKeepsIllustrationToLeftOfContent>
<img src='some-dope-illustration' />
Body content goes here!
</DivThatKeepsIllustrationToLeftOfContent>
<StandardCard.Footer {...} />
</StandardCard>
```
**Card: with Card.LoadingContent**
```js
<StandardCard>
<StandardCard.Header title='Your content is loading yo!' />
{isLoading
? <StandardCard.LoadingContent imageFilename='cats.svg' />
: <YourContent />
}
<StandardCard.Footer {...} />
</StandardCard>
```