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>
```