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.
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
- Ordered list item 1
- Ordered list item 2
- 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.
- Ordered and inline list item 1
- Ordered and inline list item 2
- Ordered and inline list item 3
Buttons
Tables
Responsive table (column headings)
Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
---|---|---|---|---|
1:1 one:one | 1:2 one:two | 1:3 one:three | 1:4 one:four | 1:5 one:five |
2:1 two:one | 2:2 two:two | 2:3 two:three | 2:4 two:four | 2:5 two:five |
3:1 three:one | 3:2 three:two | 3:3 three:three | 3:4 three:four | 3:5 three:five |
Responsive table (column/row headings)
Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
---|---|---|---|---|
Row 1 | 1:2 one:two | 1:3 one:three | 1:4 one:four | 1:5 one:five |
Row 2 | 2:2 two:two | 2:3 two:three | 2:4 two:four | 2:5 two:five |
Row 3 | 3:2 three:two | 3:3 three:three | 3:4 three:four | 3:5 three:five |
Responsive table (first body row of column headings)
Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
---|---|---|---|---|
1:1 one:one | 1:2 one:two | 1:3 one:three | 1:4 one:four | 1:5 one:five |
2:1 two:one | 2:2 two:two | 2:3 two:three | 2:4 two:four | 2:5 two:five |
3:1 three:one | 3:2 three:two | 3:3 three:three | 3:4 three:four | 3:5 three:five |
Unresponsive table
Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
---|---|---|---|---|
Row 1 | 1:2 one:two | 1:3 one:three | 1:4 one:four | 1:5 one:five |
Row 2 | 2:2 two:two | 2:3 two:three | 2:4 two:four | 2:5 two:five |
Row 3 | 3:2 three:two | 3:3 three:three | 3:4 three:four | 3:5 three:five |