Docs

Plain

  • Lorem
  • Lorem
  • Lorem
'style' => 'plain'

Icons

  • Lorem

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

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.

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

  • Lorem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

  • Lorem ipsum dolor sit amet.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

  • 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.

  • Lorem ipsum dolor sit amet, consectetur.

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

'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

    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 eget dolor morbi.

  • FPO
    Lorem

    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.

  • 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. Felis bibendum ut tristique et egestas. Rum sociis natoque penatibus et magnis. Faucibus a pellentesque sit amet porttitor eget dolor morbi. Pellentesque habitant morbi tristique senectus et.

  • FPO
    Lorem

    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.

'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

  • Lorem

    Lorem ipsum dolor sit

    (000) 000-0000

    Regions
    • Lorem ipsum dolor sit amet, consectetur.
    • Lorem ipsum dolor sit amet, consectetur.
    • Lorem
  • Lorem

    Lorem ipsum dolor sit amet, consectetur adipiscing.

    (000) 000-0000

    Regions
    • Lorem ipsum dolor sit
    • Lorem
    • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    (000) 000-0000

    Regions
    • Lorem ipsum dolor sit amet, consectetur.
    • Lorem ipsum dolor
    • Lorem ipsum dolor sit
'classes' => ['card-group--cols-1']

Standard Date

  • 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. Rum sociis natoque penatibus et.

  • 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.

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

Standard

  • FPO

    Lorem

    Lorem ipsum dolor sit

    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 Lorem ipsum
  • FPO

    Lorem ipsum

    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.

    Lorem ipsum Lorem ipsum dolor sit amet.
  • 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 a pellentesque sit.

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

Standard Small

'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