<h2 class="cwf-marker">
Headings
</h2>
<div id="heading-elements">
<h3>
Heading elements
</h3>
<h1>
Heading 1
</h1>
<h2>
Heading 2
</h2>
<h3>
Heading 3
</h3>
<h4>
Heading 4
</h4>
<h5>
Heading 5
</h5>
<h6>
Heading 6
</h6>
</div>
<div id="heading-classes">
<h3>
Heading classes
</h3>
<p>
These are paragraph tags with heading classes.
</p>
<p class="h1">
Heading 1
</p>
<p class="h2">
Heading 2
</p>
<p class="h3">
Heading 3
</p>
<p class="h4">
Heading 4
</p>
<p class="h5">
Heading 5
</p>
<p class="h6">
Heading 6
</p>
</div>
<div id="heading-spacing">
<h3>
Heading spacing
</h3>
<h1>
Heading 1 element
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque
augue nec porttitor. Aenean tortor velit,
<a href="#">hendrerit placerat lorem eget</a>, laoreet cursus nibh.
Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit,
et dictum sapien auctor quis.
</p>
<h2>
Heading 2 element
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque
augue nec porttitor. Aenean tortor velit,
<a href="#">hendrerit placerat lorem eget</a>, laoreet cursus nibh.
Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit,
et dictum sapien auctor quis.
</p>
<h3>
Heading 3 element
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque
augue nec porttitor. Aenean tortor velit,
<a href="#">hendrerit placerat lorem eget</a>, laoreet cursus nibh.
Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit,
et dictum sapien auctor quis.
</p>
<h4>
Heading 4 element
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque
augue nec porttitor. Aenean tortor velit,
<a href="#">hendrerit placerat lorem eget</a>, laoreet cursus nibh.
Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit,
et dictum sapien auctor quis.
</p>
<h5>
Heading 5 element
</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque
augue nec porttitor. Aenean tortor velit,
<a href="#">hendrerit placerat lorem eget</a>, laoreet cursus nibh.
Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit,
et dictum sapien auctor quis.
</p>
<h6>
Heading 6 element
</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque
augue nec porttitor. Aenean tortor velit,
<a href="#">hendrerit placerat lorem eget</a>, laoreet cursus nibh.
Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit,
et dictum sapien auctor quis.
</p>
</div>
<div id="heading-markers">
<h3>
Heading markers
</h3>
<p>
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.
</p>
<h1 class="cwf-marker">
Heading 1
</h1>
<h2 class="cwf-marker">
Heading 2
</h2>
<h3 class="cwf-marker">
Heading 3
</h3>
<h4 class="cwf-marker">
Heading 4
</h4>
<h5 class="cwf-marker">
Heading 5
</h5>
<h6 class="cwf-marker">
Heading 6
</h6>
<h4>
Using heading markers
</h4>
<p>
To add a marker to a heading, add the <code>.cwf-marker</code> class to it.
In t4, highlight the heading and select <code>
Format -> Formats -> t4_text-primary
</code>.
</p>
</div>
<h2 class="cwf-marker">
Paragraphs
</h2>
<div id="paragraph-examples">
<h3>
Paragraph examples
</h3>
<p class="cwf-paragraph--lead cwf-paragraph--drop-cap">
Make a leading paragraph stand out by adding a <code>
.cwf-paragraph--lead
</code> class to enlarge it and/or a <code>
.cwf-paragraph--drop-cap
</code> 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.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque
augue nec porttitor. Aenean tortor velit,
<a href="#">hendrerit placerat lorem eget</a>, 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.
</p>
<p>
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.
</p>
</div>
<h2 class="cwf-marker">
Text
</h2>
<div id="text-uppercase">
<h3>
Uppercase text
</h3>
<p class="cwf-text--uppercase">
This is an example of uppercase text.
</p>
<p>
To make text uppercase, add the <code>.cwf-text--uppercase</code> class to
it. In T4, highlight the text and select <code>
Format -> Formats -> T4_TEXT-UPPERCASE
</code>.
</p>
</div>
<div id="text-lowercase">
<h3>
Lowercase text
</h3>
<p class="cwf-text--lowercase">
THIS IS AN EXAMPLE OF LOWERCASE TEXT.
</p>
<p>
To make text lowercase, add the <code>.cwf-text--lowercase</code> class to
it. In T4, highlight the text and select <code>
Format -> Formats -> t4_text-lowercase
</code>.
</p>
</div>
<div id="text-capitalize">
<h3>
Capitalized text
</h3>
<p class="cwf-text--capitalize">
this is an example of capitalized text.
</p>
<p>
To capitalize text, add the <code>.cwf-text--capitalize</code> class to it.
In T4, highlight the text and select <code>
Format -> Formats -> t4_text-Capitalize
</code>.
</p>
</div>
<div id="text-muted">
<h3>
Muted text
</h3>
<p class="cwf-text--muted">
This is an example of muted text.
</p>
<p>
To mute text, add the <code>.cwf-text--muted</code> class to it. In T4, highlight
the text and select <code>Format -> Formats -> t4_text-muted</code>
</p>
</div>
<h2 class="cwf-marker">
Blockquotes
</h2>
<div id="blockquote-examples">
<h3>
Blockquote examples
</h3>
<blockquote>
<p>
I am a very interesting paragraph in a blockquote that needs extra
attention drawn to it.
</p>
<p>
Name attributed to quote<br />
Credentials<br />
Credentials
</p>
</blockquote>
<blockquote>
<p>
I am a very interesting paragraph in a blockquote that needs extra
attention drawn to it.
</p>
<p>
I am another paragraph in a blockquote.
</p>
<p>
Name attributed to quote<br />
Credentials<br />
Credentials
</p>
</blockquote>
<blockquote>
<p>
I am a very interesting paragraph in a blockquote that needs extra
attention drawn to it.
</p>
<p>
I am another paragraph in a blockquote.
</p>
<footer>
Name attributed to quote<br />
<cite>
Credentials<br />
Credentials
</cite>
</footer>
</blockquote>
</div>
<div id="blockquote-usage">
<h3>
Blockquote usage
</h3>
<p>
Manually add the closing quotes where applicable.
</p>
<p>
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
</p>
</div>
<h2 class="cwf-marker">
Lists
</h2>
<div id="unordered-list">
<h3>
Unordered list
</h3>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
</div>
<div id="ordered-list">
<h3>
Ordered list
</h3>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
</div>
<div id="unstyled-list">
<h3>
Unstyled list
</h3>
<p>
To unstyle a list, add the <code>.cwf-list--unstyled</code> class to it.
</p>
<ul class="cwf-list--unstyled">
<li>Unordered and unstyled list item 1</li>
<li>Unordered and unstyled list item 2</li>
<li>Unordered and unstyled list item 3</li>
</ul>
</div>
<div id="inline-list">
<h3>
Inline list
</h3>
<p>
To make a list inline, add the <code>.cwf-list--inline</code> class to it.
</p>
<ol class="cwf-list--inline">
<li>Ordered and inline list item 1</li>
<li>Ordered and inline list item 2</li>
<li>Ordered and inline list item 3</li>
</ol>
</div>
<h2 class="cwf-marker">
Buttons
</h2>
<div id="button-example">
<p>
Check out the <a href="/components/global/button">Button</a> example page.
</p>
</div>
<h2 class="cwf-marker">
Tables
</h2>
<div id="responsive-table-column-headings">
<h3>
Responsive table (column headings)
</h3>
<table>
<caption>
I am a table caption<br /><span class="mce-table-summary">
I am a table summary
</span>
</caption>
<thead>
<tr>
<th scope="col">
Column 1
</th>
<th scope="col">
Column 2
</th>
<th scope="col">
Column 3
</th>
<th scope="col">
Column 4
</th>
<th scope="col">
Column 5
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1:1 one:one
</td>
<td>
1:2 one:two
</td>
<td>
1:3 one:three
</td>
<td>
1:4 one:four
</td>
<td>
1:5 one:five
</td>
</tr>
<tr>
<td>
2:1 two:one
</td>
<td>
2:2 two:two
</td>
<td>
2:3 two:three
</td>
<td>
2:4 two:four
</td>
<td>
2:5 two:five
</td>
</tr>
<tr>
<td>
3:1 three:one
</td>
<td>
3:2 three:two
</td>
<td>
3:3 three:three
</td>
<td>
3:4 three:four
</td>
<td>
3:5 three:five
</td>
</tr>
</tbody>
</table>
</div>
<div id="responsive-table-column-row-headings">
<h3>
Responsive table (column/row headings)
</h3>
<table>
<thead>
<tr>
<th scope="col">
Column 1
</th>
<th scope="col">
Column 2
</th>
<th scope="col">
Column 3
</th>
<th scope="col">
Column 4
</th>
<th scope="col">
Column 5
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Row 1
</th>
<td>
1:2 one:two
</td>
<td>
1:3 one:three
</td>
<td>
1:4 one:four
</td>
<td>
1:5 one:five
</td>
</tr>
<tr>
<th scope="row">
Row 2
</th>
<td>
2:2 two:two
</td>
<td>
2:3 two:three
</td>
<td>
2:4 two:four
</td>
<td>
2:5 two:five
</td>
</tr>
<tr>
<th scope="row">
Row 3
</th>
<td>
3:2 three:two
</td>
<td>
3:3 three:three
</td>
<td>
3:4 three:four
</td>
<td>
3:5 three:five
</td>
</tr>
</tbody>
</table>
</div>
<div id="responsive-table-first-body-row-of-ths">
<h3>
Responsive table (first body row of column headings)
</h3>
<table>
<tbody>
<tr>
<th scope="col">
Column 1
</th>
<th scope="col">
Column 2
</th>
<th scope="col">
Column 3
</th>
<th scope="col">
Column 4
</th>
<th scope="col">
Column 5
</th>
</tr>
<tr>
<td>
1:1 one:one
</td>
<td>
1:2 one:two
</td>
<td>
1:3 one:three
</td>
<td>
1:4 one:four
</td>
<td>
1:5 one:five
</td>
</tr>
<tr>
<td>
2:1 two:one
</td>
<td>
2:2 two:two
</td>
<td>
2:3 two:three
</td>
<td>
2:4 two:four
</td>
<td>
2:5 two:five
</td>
</tr>
<tr>
<td>
3:1 three:one
</td>
<td>
3:2 three:two
</td>
<td>
3:3 three:three
</td>
<td>
3:4 three:four
</td>
<td>
3:5 three:five
</td>
</tr>
</tbody>
</table>
</div>
<div id="unresponsive-table">
<h3>
Unresponsive table
</h3>
<table data-responsive="false">
<thead>
<tr>
<th scope="col">
Column 1
</th>
<th scope="col">
Column 2
</th>
<th scope="col">
Column 3
</th>
<th scope="col">
Column 4
</th>
<th scope="col">
Column 5
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Row 1
</th>
<td>
1:2 one:two
</td>
<td>
1:3 one:three
</td>
<td>
1:4 one:four
</td>
<td>
1:5 one:five
</td>
</tr>
<tr>
<th scope="row">
Row 2
</th>
<td>
2:2 two:two
</td>
<td>
2:3 two:three
</td>
<td>
2:4 two:four
</td>
<td>
2:5 two:five
</td>
</tr>
<tr>
<th scope="row">
Row 3
</th>
<td>
3:2 three:two
</td>
<td>
3:3 three:three
</td>
<td>
3:4 three:four
</td>
<td>
3:5 three:five
</td>
</tr>
</tbody>
</table>
</div>
<h2 class="cwf-marker">
Images
</h2>
<div id="image-examples">
<p>
<img src="https://picsum.photos/800/450" alt="Random image from picsum.photos" />
</p>
<p>
<a title="link title" href="#">
<img src="https://picsum.photos/1920/1080" alt="Random image from picsum.photos" />
</a>
</p>
</div>
{# Headings #}
<h2 class="cwf-marker">
Headings
</h2>
<div id="heading-elements">
<h3>
Heading elements
</h3>
<h1>
Heading 1
</h1>
<h2>
Heading 2
</h2>
<h3>
Heading 3
</h3>
<h4>
Heading 4
</h4>
<h5>
Heading 5
</h5>
<h6>
Heading 6
</h6>
</div>
<div id="heading-classes">
<h3>
Heading classes
</h3>
<p>
These are paragraph tags with heading classes.
</p>
<p class="h1">
Heading 1
</p>
<p class="h2">
Heading 2
</p>
<p class="h3">
Heading 3
</p>
<p class="h4">
Heading 4
</p>
<p class="h5">
Heading 5
</p>
<p class="h6">
Heading 6
</p>
</div>
<div id="heading-spacing">
<h3>
Heading spacing
</h3>
<h1>
Heading 1 element
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque
augue nec porttitor. Aenean tortor velit,
<a href="#">hendrerit placerat lorem eget</a>, laoreet cursus nibh.
Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit,
et dictum sapien auctor quis.
</p>
<h2>
Heading 2 element
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque
augue nec porttitor. Aenean tortor velit,
<a href="#">hendrerit placerat lorem eget</a>, laoreet cursus nibh.
Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit,
et dictum sapien auctor quis.
</p>
<h3>
Heading 3 element
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque
augue nec porttitor. Aenean tortor velit,
<a href="#">hendrerit placerat lorem eget</a>, laoreet cursus nibh.
Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit,
et dictum sapien auctor quis.
</p>
<h4>
Heading 4 element
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque
augue nec porttitor. Aenean tortor velit,
<a href="#">hendrerit placerat lorem eget</a>, laoreet cursus nibh.
Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit,
et dictum sapien auctor quis.
</p>
<h5>
Heading 5 element
</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque
augue nec porttitor. Aenean tortor velit,
<a href="#">hendrerit placerat lorem eget</a>, laoreet cursus nibh.
Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit,
et dictum sapien auctor quis.
</p>
<h6>
Heading 6 element
</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque
augue nec porttitor. Aenean tortor velit,
<a href="#">hendrerit placerat lorem eget</a>, laoreet cursus nibh.
Quisque convallis blandit purus a ultrices. Ut elementum feugiat elit,
et dictum sapien auctor quis.
</p>
</div>
<div id="heading-markers">
<h3>
Heading markers
</h3>
<p>
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.
</p>
<h1 class="cwf-marker">
Heading 1
</h1>
<h2 class="cwf-marker">
Heading 2
</h2>
<h3 class="cwf-marker">
Heading 3
</h3>
<h4 class="cwf-marker">
Heading 4
</h4>
<h5 class="cwf-marker">
Heading 5
</h5>
<h6 class="cwf-marker">
Heading 6
</h6>
<h4>
Using heading markers
</h4>
<p>
To add a marker to a heading, add the <code>.cwf-marker</code> class to it.
In t4, highlight the heading and select <code>
Format -> Formats -> t4_text-primary
</code>.
</p>
</div>
{# Paragraphs #}
<h2 class="cwf-marker">
Paragraphs
</h2>
<div id="paragraph-examples">
<h3>
Paragraph examples
</h3>
<p class="cwf-paragraph--lead cwf-paragraph--drop-cap">
Make a leading paragraph stand out by adding a <code>
.cwf-paragraph--lead
</code> class to enlarge it and/or a <code>
.cwf-paragraph--drop-cap
</code> 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.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
bibendum sem eu pharetra vestibulum. Praesent malesuada pellentesque
augue nec porttitor. Aenean tortor velit,
<a href="#">hendrerit placerat lorem eget</a>, 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.
</p>
<p>
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.
</p>
</div>
{# Text #}
<h2 class="cwf-marker">
Text
</h2>
<div id="text-uppercase">
<h3>
Uppercase text
</h3>
<p class="cwf-text--uppercase">
This is an example of uppercase text.
</p>
<p>
To make text uppercase, add the <code>.cwf-text--uppercase</code> class to
it. In T4, highlight the text and select <code>
Format -> Formats -> T4_TEXT-UPPERCASE
</code>.
</p>
</div>
<div id="text-lowercase">
<h3>
Lowercase text
</h3>
<p class="cwf-text--lowercase">
THIS IS AN EXAMPLE OF LOWERCASE TEXT.
</p>
<p>
To make text lowercase, add the <code>.cwf-text--lowercase</code> class to
it. In T4, highlight the text and select <code>
Format -> Formats -> t4_text-lowercase
</code>.
</p>
</div>
<div id="text-capitalize">
<h3>
Capitalized text
</h3>
<p class="cwf-text--capitalize">
this is an example of capitalized text.
</p>
<p>
To capitalize text, add the <code>.cwf-text--capitalize</code> class to it.
In T4, highlight the text and select <code>
Format -> Formats -> t4_text-Capitalize
</code>.
</p>
</div>
<div id="text-muted">
<h3>
Muted text
</h3>
<p class="cwf-text--muted">
This is an example of muted text.
</p>
<p>
To mute text, add the <code>.cwf-text--muted</code> class to it. In T4, highlight
the text and select <code>Format -> Formats -> t4_text-muted</code>
</p>
</div>
{# Blockquotes #}
<h2 class="cwf-marker">
Blockquotes
</h2>
<div id="blockquote-examples">
<h3>
Blockquote examples
</h3>
<blockquote>
<p>
I am a very interesting paragraph in a blockquote that needs extra
attention drawn to it.
</p>
<p>
Name attributed to quote<br />
Credentials<br />
Credentials
</p>
</blockquote>
<blockquote>
<p>
I am a very interesting paragraph in a blockquote that needs extra
attention drawn to it.
</p>
<p>
I am another paragraph in a blockquote.
</p>
<p>
Name attributed to quote<br />
Credentials<br />
Credentials
</p>
</blockquote>
<blockquote>
<p>
I am a very interesting paragraph in a blockquote that needs extra
attention drawn to it.
</p>
<p>
I am another paragraph in a blockquote.
</p>
<footer>
Name attributed to quote<br />
<cite>
Credentials<br />
Credentials
</cite>
</footer>
</blockquote>
</div>
<div id="blockquote-usage">
<h3>
Blockquote usage
</h3>
<p>
Manually add the closing quotes where applicable.
</p>
<p>
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
</p>
</div>
{# Lists #}
<h2 class="cwf-marker">
Lists
</h2>
<div id="unordered-list">
<h3>
Unordered list
</h3>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
</div>
<div id="ordered-list">
<h3>
Ordered list
</h3>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
</div>
<div id="unstyled-list">
<h3>
Unstyled list
</h3>
<p>
To unstyle a list, add the <code>.cwf-list--unstyled</code> class to it.
</p>
<ul class="cwf-list--unstyled">
<li>Unordered and unstyled list item 1</li>
<li>Unordered and unstyled list item 2</li>
<li>Unordered and unstyled list item 3</li>
</ul>
</div>
<div id="inline-list">
<h3>
Inline list
</h3>
<p>
To make a list inline, add the <code>.cwf-list--inline</code> class to it.
</p>
<ol class="cwf-list--inline">
<li>Ordered and inline list item 1</li>
<li>Ordered and inline list item 2</li>
<li>Ordered and inline list item 3</li>
</ol>
</div>
{# Buttons #}
<h2 class="cwf-marker">
Buttons
</h2>
<div id="button-example">
<p>
Check out the <a href="/components/global/button">Button</a> example page.
</p>
</div>
{# Tables #}
<h2 class="cwf-marker">
Tables
</h2>
<div id="responsive-table-column-headings">
<h3>
Responsive table (column headings)
</h3>
<table>
<caption>
I am a table caption<br /><span class="mce-table-summary">
I am a table summary
</span>
</caption>
<thead>
<tr>
<th scope="col">
Column 1
</th>
<th scope="col">
Column 2
</th>
<th scope="col">
Column 3
</th>
<th scope="col">
Column 4
</th>
<th scope="col">
Column 5
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1:1 one:one
</td>
<td>
1:2 one:two
</td>
<td>
1:3 one:three
</td>
<td>
1:4 one:four
</td>
<td>
1:5 one:five
</td>
</tr>
<tr>
<td>
2:1 two:one
</td>
<td>
2:2 two:two
</td>
<td>
2:3 two:three
</td>
<td>
2:4 two:four
</td>
<td>
2:5 two:five
</td>
</tr>
<tr>
<td>
3:1 three:one
</td>
<td>
3:2 three:two
</td>
<td>
3:3 three:three
</td>
<td>
3:4 three:four
</td>
<td>
3:5 three:five
</td>
</tr>
</tbody>
</table>
</div>
<div id="responsive-table-column-row-headings">
<h3>
Responsive table (column/row headings)
</h3>
<table>
<thead>
<tr>
<th scope="col">
Column 1
</th>
<th scope="col">
Column 2
</th>
<th scope="col">
Column 3
</th>
<th scope="col">
Column 4
</th>
<th scope="col">
Column 5
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Row 1
</th>
<td>
1:2 one:two
</td>
<td>
1:3 one:three
</td>
<td>
1:4 one:four
</td>
<td>
1:5 one:five
</td>
</tr>
<tr>
<th scope="row">
Row 2
</th>
<td>
2:2 two:two
</td>
<td>
2:3 two:three
</td>
<td>
2:4 two:four
</td>
<td>
2:5 two:five
</td>
</tr>
<tr>
<th scope="row">
Row 3
</th>
<td>
3:2 three:two
</td>
<td>
3:3 three:three
</td>
<td>
3:4 three:four
</td>
<td>
3:5 three:five
</td>
</tr>
</tbody>
</table>
</div>
<div id="responsive-table-first-body-row-of-ths">
<h3>
Responsive table (first body row of column headings)
</h3>
<table>
<tbody>
<tr>
<th scope="col">
Column 1
</th>
<th scope="col">
Column 2
</th>
<th scope="col">
Column 3
</th>
<th scope="col">
Column 4
</th>
<th scope="col">
Column 5
</th>
</tr>
<tr>
<td>
1:1 one:one
</td>
<td>
1:2 one:two
</td>
<td>
1:3 one:three
</td>
<td>
1:4 one:four
</td>
<td>
1:5 one:five
</td>
</tr>
<tr>
<td>
2:1 two:one
</td>
<td>
2:2 two:two
</td>
<td>
2:3 two:three
</td>
<td>
2:4 two:four
</td>
<td>
2:5 two:five
</td>
</tr>
<tr>
<td>
3:1 three:one
</td>
<td>
3:2 three:two
</td>
<td>
3:3 three:three
</td>
<td>
3:4 three:four
</td>
<td>
3:5 three:five
</td>
</tr>
</tbody>
</table>
</div>
<div id="unresponsive-table">
<h3>
Unresponsive table
</h3>
<table data-responsive="false">
<thead>
<tr>
<th scope="col">
Column 1
</th>
<th scope="col">
Column 2
</th>
<th scope="col">
Column 3
</th>
<th scope="col">
Column 4
</th>
<th scope="col">
Column 5
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Row 1
</th>
<td>
1:2 one:two
</td>
<td>
1:3 one:three
</td>
<td>
1:4 one:four
</td>
<td>
1:5 one:five
</td>
</tr>
<tr>
<th scope="row">
Row 2
</th>
<td>
2:2 two:two
</td>
<td>
2:3 two:three
</td>
<td>
2:4 two:four
</td>
<td>
2:5 two:five
</td>
</tr>
<tr>
<th scope="row">
Row 3
</th>
<td>
3:2 three:two
</td>
<td>
3:3 three:three
</td>
<td>
3:4 three:four
</td>
<td>
3:5 three:five
</td>
</tr>
</tbody>
</table>
</div>
{# Images #}
<h2 class="cwf-marker">
Images
</h2>
<div id="image-examples">
<p>
<img src="https://picsum.photos/800/450"
alt="Random image from picsum.photos" />
</p>
<p>
<a title="link title" href="#">
<img src="https://picsum.photos/1920/1080"
alt="Random image from picsum.photos" />
</a>
</p>
</div>
/* No context defined. */
// General content component styles
@import "../../shared/reset";
@import "../../shared/style";
// Heading markers
@mixin general-content__marker {
&.cwf-marker,
&.t4_text-primary {
@content;
}
}
$marker--padding-left: 1.2em;
$marker--background-color: style__color(gold) !default;
$marker--display: inline-flex !default;
$marker--margin-left: -1.2em !default;
$marker--margin-right: 0.2em !default;
$marker--width: 1em !default;
$marker--height: 0.75em !default;
#{$reset__headings--selectors--lg} {
@include general-content__marker {
padding-left: $marker--padding-left;
--cwf-marker--background-color: #{$marker--background-color};
&:before {
content: "";
display: $marker--display;
margin-left: $marker--margin-left;
margin-right: $marker--margin-right;
width: $marker--width;
height: $marker--height;
background-color: var(--cwf-marker--background-color);
@include style__angle($marker--width, $marker--height);
}
}
}
// Heading borders
$marker--border-color: rgba(style__color(black), 0.47) !default;
$marker--border-bottom-width: 1px !default;
$marker--border-bottom-style: solid !default;
$marker--border-bottom: var(--cwf-marker--border-bottom-width)
var(--cwf-marker--border-bottom-style) !default;
#{$reset__headings--selectors--md},
#{$reset__headings--selectors--sm} {
@include general-content__marker {
border-bottom: $marker--border-bottom;
--cwf-marker--border-bottom-width: #{$marker--border-bottom-width};
--cwf-marker--border-bottom-style: #{$marker--border-bottom-style};
}
}
$marker--border-bottom-style--sm: dotted !default;
#{$reset__headings--selectors--sm} {
@include general-content__marker {
--cwf-marker--border-bottom-style: #{$marker--border-bottom-style--sm};
}
}
// Links
$link--color: style__color(blue, accent) !default;
$link--active--color: style__color(blue, accent) !default;
a {
font-weight: 700;
color: var(--cwf-link--color);
--cwf-link--color: #{$link--color};
--cwf-link--active--color: #{$link--active--color};
&:active,
&:focus,
&:hover {
text-decoration: none;
color: var(--cwf-link--active--color);
}
}
// Blockquotes
$blockquote--accent-color: theme__accent--background() !default;
$blockquote__marker--background-color: style__color(white-darkest) !default;
$blockquote__marker--color: style__color(gray) !default;
blockquote {
--cwf-blockquote--accent-color: #{$blockquote--accent-color};
--cwf-blockquote__marker--background-color: #{$blockquote__marker--background-color};
--cwf-blockquote__marker--color: #{$blockquote__marker--color};
border-top: 1px solid var(--cwf-blockquote--accent-color);
border-bottom: 1px solid var(--cwf-blockquote--accent-color);
$blockquote__marker--width: 3rem !default;
$blockquote__marker--height: 2rem !default;
&:before {
@include style__icon("\f10d");
display: inline-flex;
align-items: center;
width: $blockquote__marker--width;
height: $blockquote__marker--height;
margin-top: 1rem;
background-color: var(--cwf-blockquote__marker--background-color);
padding-left: 0.5rem;
font-size: 1rem;
line-height: 0;
color: var(--cwf-blockquote__marker--color);
@include style__angle(
$blockquote__marker--width,
$blockquote__marker--height,
true
);
}
%content {
margin: 1rem;
font-style: italic;
}
%footer {
font-size: 0.875rem;
}
%attribute {
font-style: normal;
font-weight: 700;
text-transform: uppercase;
color: var(--cwf-blockquote--accent-color);
}
p {
@extend %content;
padding-top: 0;
&:nth-last-child(2),
&:only-child {
position: relative;
&:after {
position: absolute;
content: "\201D";
}
}
&:last-child:not(&:only-child) {
@extend %footer;
&:first-line {
@extend %attribute;
}
}
}
footer {
@extend %content;
@extend %footer;
&:first-line {
@extend %attribute;
}
}
}
// Images
img {
max-width: 100%;
height: auto !important;
}
// Tables
$table--background-color: style__color(white) !default;
$table--border-color: style__color(gray-lightest) !default;
$table__caption--color: style__color(gray-light) !default;
$table__thead--background-color: style__color(white-dark) !default;
$table__thead--border-color: style__color(gray-dark) !default;
$table__td--before--background-color: darken(
style__color(white-dark),
2.8%
) !default; // #f1f1f1
$table__td--before--color: style__color(gray-dark) !default;
table {
--cwf-table--background-color: #{$table--background-color};
--cwf-table--border-color: #{$table--border-color};
--cwf-table__caption--color: #{$table__caption--color};
--cwf-table__thead--background-color: #{$table__thead--background-color};
--cwf-table__thead--border-color: #{$table__thead--border-color};
--cwf-table__td--before--background-color: #{$table__td--before--background-color};
--cwf-table__td--before--color: #{$table__td--before--color};
width: 100%;
margin-bottom: 1rem;
border-collapse: collapse;
background-color: var(--cwf-table--background-color);
caption {
color: var(--cwf-table__caption--color);
font-weight: 700;
padding-bottom: 0.5rem;
text-align: left;
}
td,
th {
border: 1px solid var(--cwf-table--border-color);
padding: 0.5rem 1rem;
text-align: left;
vertical-align: top;
}
td {
margin: 0 -1px -1px 0;
width: 100%;
@include media__breakpoint {
width: initial;
}
}
td[data-label] {
padding-top: 2rem;
position: relative;
&:before {
content: attr(data-label);
display: inline-block;
background-color: var(--cwf-table__td--before--background-color);
color: var(--cwf-table__td--before--color);
display: block;
font-size: 0.75rem;
font-weight: 700;
position: absolute;
left: 0;
top: 0;
padding: 0.25em 0.5em;
@include media__breakpoint {
display: none;
}
}
@include media__breakpoint {
margin: initial;
padding-top: 0.5rem;
}
}
th {
vertical-align: bottom;
border-bottom: 2px solid var(--cwf-table__thead--border-color);
&[scope="row"] {
width: 100%;
border-width: 1px;
background-color: var(--cwf-table__thead--background-color);
@include media__breakpoint {
width: auto;
background-color: transparent;
}
}
}
thead {
background-color: var(--cwf-table__thead--background-color);
font-weight: 700;
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
@include media__breakpoint {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
}
}
tbody + tbody {
border-top: 2px solid var(--cwf-table__thead--border-color);
}
tr {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 1rem;
&:last-child {
margin-bottom: 1px;
}
@include media__breakpoint {
display: table-row;
flex-direction: initial;
flex-wrap: initial;
margin-bottom: initial;
}
}
}
// Unresponsive tables
table[data-responsive="false"] {
td {
margin: initial;
padding-top: 0.5rem;
width: initial;
&:before {
display: none;
}
}
th[scope="row"] {
width: auto;
background-color: transparent;
}
thead {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
}
tr {
display: table-row;
flex-direction: initial;
flex-wrap: initial;
margin-bottom: initial;
}
}
No notes defined.