1. Basic content types – headlines, paragraph text, lists, images
This is an H1 Page Title
This is an H2 Subheading
This is an H3 Subheading
This is an H4 Subheading
This is an H5 Subheading
This is an H6 Subheading
This is body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna neque, accumsan nec ex ac, tempor consequat nisi. Ut non dui eget lorem laoreet tempor. In sagittis lobortis purus, vel aliquam arcu porta nec. Aenean interdum nec nisl eu fringilla. Suspendisse nunc arcu, imperdiet in interdum ac, eleifend eget sem. Morbi libero libero, eleifend ac est eu, interdum pulvinar nibh. Nam nec massa blandit tortor ornare viverra placerat et nisl. Donec in mattis lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna neque, accumsan nec ex ac, tempor consequat nisi. Ut non dui eget lorem laoreet tempor. In sagittis lobortis purus, vel aliquam arcu porta nec. Aenean interdum nec nisl eu fringilla. Suspendisse nunc arcu, imperdiet in interdum ac, eleifend eget sem. Morbi libero libero, eleifend ac est eu, interdum pulvinar nibh. Nam nec massa blandit tortor ornare viverra placerat et nisl. Donec in mattis lorem.
A small paragraph to emphasis and show important bits.
- This is a list item
- So is this – there could be more
- Make sure to style list items to:
- Not forgetting child list items
- Not forgetting child list items
- Not forgetting child list items
- Not forgetting child list items
- A couple more
- top level list items
Don’t forget Ordered lists:
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
2. Accordions & Buttons
3. Cards – can be placed in multiple rows, up to 3 rows at a time (on desktop – stacked on mobile)
3a. Card style 1 – headline, description, icon + link
This is the size of the type for the header
sed cras ornare arcu dui vivamus arcu felis bibendum ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce
This is the size of the type for the header
sed cras ornare arcu dui vivamus arcu felis bibendum ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce
This is the size of the type for the header
sed cras ornare arcu dui vivamus arcu felis bibendum ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce
This is the size of the type for the header
sed cras ornare arcu dui vivamus arcu felis bibendum ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce
This is the size of the type for the header
sed cras ornare arcu dui vivamus arcu felis bibendum ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce
This is the size of the type for the header
sed cras ornare arcu dui vivamus arcu felis bibendum ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce
3b. Card style 2 – “mix and match” (1/2/6 are headline + description, 3/4 are all caps headline + link, 5 is headline + learn more).
Sed cras ornare ornare arcu dui
arcu dui vivamus arcu dui vivamus arcu felis bibendumarcu felis bibendum arcu dui vivamus
Sed cras ornare ornare arcu dui
arcu dui vivamus arcu dui vivamus arcu felis bibendumarcu felis bibendum arcu dui vivamus
sed cras ornare arcu dui vivamus arcu felis bibendum
sed cras ornare arcu dui vivamus arcu felis bibendum
Sed cras ornare arcu dui vivamus arcu felis bibendum. Sed cras ornare dui. Learn More.
Sed cras ornare ornare arcu dui
arcu dui vivamus arcu dui vivamus arcu felis bibendumarcu felis bibendum arcu dui vivamus
3c. Card style 3 for rich/engaging content. Features photo/solid color background, headline, description, Learn More link. For solid color versions, icons are optional.
This section is for a post type. Lorem ipsum dolor sit amet, consectetur
integer quis auctor elit sed
vulputate mi sit.
This section is for a post type. Lorem ipsum dolor sit amet, consectetur
integer quis auctor elit sed
vulputate mi sit.
4. Iconography
5. Slider (2 different styles)