General Content

Headings

Heading elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading classes

These are paragraph tags with heading classes.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading spacing

Heading 1 element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque augue nec porttitor. Aenean tortor velit, hendrerit placerat lorem eget, laoreet cursus nibh. Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit, et dictum sapien auctor quis.

Heading 2 element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque augue nec porttitor. Aenean tortor velit, hendrerit placerat lorem eget, laoreet cursus nibh. Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit, et dictum sapien auctor quis.

Heading 3 element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque augue nec porttitor. Aenean tortor velit, hendrerit placerat lorem eget, laoreet cursus nibh. Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit, et dictum sapien auctor quis.

Heading 4 element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque augue nec porttitor. Aenean tortor velit, hendrerit placerat lorem eget, laoreet cursus nibh. Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit, et dictum sapien auctor quis.

Heading 5 element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque augue nec porttitor. Aenean tortor velit, hendrerit placerat lorem eget, laoreet cursus nibh. Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit, et dictum sapien auctor quis.

Heading 6 element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque augue nec porttitor. Aenean tortor velit, hendrerit placerat lorem eget, laoreet cursus nibh. Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit, et dictum sapien auctor quis.

Heading markers

Larger headings (H1, H2, H3) use an angled element for emphasis, whereas medium (H4) and small headings (H5, h6) use a border to emphasize the text.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Using heading markers

To add a marker to a heading, add the .cwf-marker class to it. In t4, highlight the heading and select Format -> Formats -> t4_text-primary.

Paragraphs

Paragraph examples

Make a leading paragraph stand out by adding a .cwf-paragraph--lead class to enlarge it and/or a .cwf-paragraph--drop-cap class to emphasize the first letter. You can also use these classes on a wrapping element, and it will target the first paragraph automatically. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed viverra ipsum. Maecenas et maximus arcu. Nullam in lorem id magna suscipit cursus. Fusce vitae nibh lacinia, posuere dolor et, sodales diam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque augue nec porttitor. Aenean tortor velit, hendrerit placerat lorem eget, laoreet cursus nibh. Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit, et dictum sapien auctor quis. Suspendisse euismod ligula nisl, egestas suscipit eros tempor vel. Donec laoreet, elit eget porttitor finibus, quam nunc feugiat sem, ac mollis tellus mauris sit amet lectus. Nullam semper ut justo quis pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan odio vel nisi tincidunt, in vestibulum nunc vulputate. Nulla vel enim ac diam tempor blandit eu in metus. Ut scelerisque mollis orci, sit amet dignissim nisi egestas eu. Praesent maximus ac libero in rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus sapien non sapien consequat, eget molestie erat consectetur. Nullam iaculis auctor neque ut volutpat.

Curabitur consequat urna mi, ut tempus dolor tempus id. Mauris a nisl id ligula egestas blandit. Pellentesque tincidunt metus ac eleifend maximus. Sed suscipit hendrerit tellus nec volutpat. Phasellus congue vulputate felis sit amet sollicitudin. Integer tempus ornare magna in ultricies. Duis eu enim id nibh porttitor hendrerit quis eu ligula.

Text

Uppercase text

This is an example of uppercase text.

To make text uppercase, add the .cwf-text--uppercase class to it. In T4, highlight the text and select Format -> Formats -> T4_TEXT-UPPERCASE.

Lowercase text

THIS IS AN EXAMPLE OF LOWERCASE TEXT.

To make text lowercase, add the .cwf-text--lowercase class to it. In T4, highlight the text and select Format -> Formats -> t4_text-lowercase.

Capitalized text

this is an example of capitalized text.

To capitalize text, add the .cwf-text--capitalize class to it. In T4, highlight the text and select Format -> Formats -> t4_text-Capitalize.

Muted text

This is an example of muted text.

To mute text, add the .cwf-text--muted class to it. In T4, highlight the text and select Format -> Formats -> t4_text-muted

Blockquotes

Blockquote examples

I am a very interesting paragraph in a blockquote that needs extra attention drawn to it.

Name attributed to quote
Credentials
Credentials

I am a very interesting paragraph in a blockquote that needs extra attention drawn to it.

I am another paragraph in a blockquote.

Name attributed to quote
Credentials
Credentials

I am a very interesting paragraph in a blockquote that needs extra attention drawn to it.

I am another paragraph in a blockquote.

Name attributed to quote
Credentials
Credentials

Blockquote usage

Manually add the closing quotes where applicable.

The last paragraph gets a first line treatment of blue, bold and non-italic. To add credentials after name in t4, hold Shift and press Enter

Lists

Unordered list

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3

Ordered list

  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3

Unstyled list

To unstyle a list, add the .cwf-list--unstyled class to it.

  • Unordered and unstyled list item 1
  • Unordered and unstyled list item 2
  • Unordered and unstyled list item 3

Inline list

To make a list inline, add the .cwf-list--inline class to it.

  1. Ordered and inline list item 1
  2. Ordered and inline list item 2
  3. Ordered and inline list item 3

Buttons

Check out the Button example page.

Tables

Responsive table (column headings)

I am a table caption
I am a table summary
Column 1Column 2Column 3Column 4Column 5
1:1 one:one1:2 one:two1:3 one:three1:4 one:four1:5 one:five
2:1 two:one2:2 two:two2:3 two:three2:4 two:four2:5 two:five
3:1 three:one3:2 three:two3:3 three:three3:4 three:four3:5 three:five

Responsive table (column/row headings)

Column 1Column 2Column 3Column 4Column 5
Row 11:2 one:two1:3 one:three1:4 one:four1:5 one:five
Row 22:2 two:two2:3 two:three2:4 two:four2:5 two:five
Row 33:2 three:two3:3 three:three3:4 three:four3:5 three:five

Responsive table (first body row of column headings)

Column 1Column 2Column 3Column 4Column 5
1:1 one:one1:2 one:two1:3 one:three1:4 one:four1:5 one:five
2:1 two:one2:2 two:two2:3 two:three2:4 two:four2:5 two:five
3:1 three:one3:2 three:two3:3 three:three3:4 three:four3:5 three:five

Unresponsive table

Column 1Column 2Column 3Column 4Column 5
Row 11:2 one:two1:3 one:three1:4 one:four1:5 one:five
Row 22:2 two:two2:3 two:three2:4 two:four2:5 two:five
Row 33:2 three:two3:3 three:three3:4 three:four3:5 three:five

Images

Random image from picsum.photos

Random image from picsum.photos