Docs

Plain

  • Lorem
  • Lorem
  • Lorem ipsum dolor sit amet.
'style' => 'plain'

Icons

'style' => 'icon'

Icons with Heading

'style' => 'icon'

Article - Healthy Living

'style' => 'article-healthy-living'

Article - Bento Box

'style' => 'article-bento-box'

Article - Press Release

  • FPO
    Lorem ipsum dolor sit amet, consectetur.

    00/00/0000

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit. Felis bibendum ut tristique et egestas. Rum sociis natoque penatibus et magnis. Faucibus a pellentesque sit.

  • FPO
    Lorem ipsum

    00/00/0000

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit. Felis bibendum ut tristique et egestas. Rum sociis natoque penatibus et magnis. Faucibus a.

  • FPO
    Lorem ipsum dolor sit

    00/00/0000

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit. Felis bibendum ut tristique et egestas.

  • FPO
    Lorem ipsum dolor sit amet.

    00/00/0000

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi.

'style' => 'article-press-release'

Profile (formerly Leadership)

'classes' => ['card-group--cols-4']

Profile - Provider

'classes' => ['card-group--cols-4']

Profile - Provider Small

'classes' => ['card-group--cols-4']

Contact

'classes' => ['card-group--cols-1']

Standard Date

  • FPO
    Lorem ipsum dolor sit

    00/00/0000

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit. Felis bibendum.

  • FPO
    Lorem ipsum dolor

    00/00/0000

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit.

  • FPO
    Lorem ipsum dolor sit

    00/00/0000

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit. Felis bibendum ut tristique et egestas. Rum sociis natoque penatibus et magnis. Faucibus a pellentesque sit amet porttitor.

'classes' => ['card-group--cols-3']

Standard

'classes' => ['card-group--cols-3']

Standard Small

  • FPO

    Lorem ipsum dolor

    Lorem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit. Felis bibendum ut tristique et egestas. Rum sociis natoque penatibus et magnis. Faucibus.

    Lorem Lorem ipsum dolor sit amet, consectetur adipiscing.
  • FPO

    Lorem ipsum

    Lorem ipsum dolor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit. Felis bibendum ut tristique et egestas. Rum sociis natoque penatibus et magnis. Faucibus a pellentesque.

    Lorem ipsum dolor Lorem
  • FPO

    Lorem

    Lorem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc congue nisi vitae suscipit. Felis bibendum ut tristique et egestas. Rum sociis natoque penatibus et magnis. Faucibus.

    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
'classes' => ['card-group--cols-3']

Non-dark container

Card bg: None. Text: Dark.
Card bg: Light. Text: Dark.
Card bg: Dark. Text: Light

Dark container

The container's .dark makes all child text white. Prevent that in a card with a light bg.

Card bg: None. Text: Dark.
Card bg: Light. Text: Dark.
Card bg: Dark. Text: Light