Magnolia Design System

Styles & Components for Pelican State

Typography

Heading 1

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4
Heading 5
Heading 5
Heading 6
Heading 6
Lorem ipsum dolor sit amet
Block Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae.

Paragraph
Lorem ipsum dolor sit amet
Text
Lorem ipsum dolor sit amet
Text - White
Lorem ipsum dolor sit amet
Text - Blue
Lorem ipsum dolor sit amet
Text - Gold
Text Link
Link
Lorem ipsum dolor sit amet
Meta

Buttons

Button TextButton TextButton TextButton TextButton Text

Grids

1-Column Grid
2-Column Grid
3-Column Grid
4-Column Grid

Padding

16px Padding
24px Padding
48px Padding
96px Padding

Spacers & Dividers

8px Spacer
16px Spacer
24px Spacer
32px Spacer
40px Spacer
48px Spacer
56px Spacer
64px Spacer
72px Spacer
80px Spacer
88px Spacer
96px Spacer
Text Divider
16px Divider
24px Divider
48px Divider

Flex Box

Heading
Button Text
Horizontal; Align Top; Justify Left
Heading
Button Text
Horizontal; Align Top; Justify Center
Heading
Button Text
Horizontal; Align Top; Justify Right
Heading
Button Text
Horizontal; Align Top; Justify Split
Heading
Button Text
Horizontal; Align Center; Justify Left
Heading
Button Text
Horizontal; Align Center; Justify Center
Heading
Button Text
Horizontal; Align Center; Justify Right
Heading
Button Text
Horizontal; Align Center; Justify Split
Heading
Button Text
Horizontal; Align Bottom; Justify Left
Heading
Button Text
Horizontal; Align Bottom; Justify Center
Heading
Button Text
Horizontal; Align Bottom; Justify Right
Heading
Button Text
Horizontal; Align Bottom; Justify Split
Heading
Button Text
Horizontal; Align Stretch; Justify Left
Heading
Button Text
Horizontal; Align Stretch; Justify Center
Heading
Button Text
Horizontal; Align Stretch; Justify Right
Heading
Button Text
Horizontal; Align Stretch; Justify Split
Heading
Button Text
Vertical; Align Left; Justify Top
Heading
Button Text
vertical; Align left; Justify Center
Heading
Button Text
vertical; Align left; Justify bottom
Heading
Button Text
vertical; Align left; Justify Split
Heading
Button Text
Vertical; Align Center; Justify Top
Heading
Button Text
Vertical; Align Center; Justify Center
Heading
Button Text
Vertical; Align Center; Justify Bottom
Heading
Button Text
Vertical; Align Center; Justify Split
Heading
Button Text
Vertical; Align Right; Justify Top
Heading
Button Text
Vertical; Align Right; Justify Center
Heading
Button Text
Vertical; Align Right; Justify Bottom
Heading
Button Text
Vertical; Align Right; Justify Split
Heading
Button Text
Vertical; Align Stretch; Justify Top
Heading
Button Text
Vertical; Align Stretch; Justify Center
Heading
Button Text
Vertical; Align Stretch; Justify Bottom
Heading
Button Text
Vertical; Align Stretch; Justify Split

Hero + Full-width Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Button Text

Body + Full-width Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Button Text

Body + 2-Column Grid

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Button Text
© 2020 Pelican State Partners, LLC. All rights reserved.