Header Text

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5

This is an H6

Paragraph Text

This text is in a standard paragraph tag. Strong text looks like THIS. Emphasized text looks like THIS. Underlined text looks like THIS. This is a standard link, this is a strong link. Here is some additional text to show paragraph style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus suscipit nisl sit amet malesuada placerat. Quisque cursus semper odio, id vulputate ipsum pulvinar non. In aliquam tristique odio, ac condimentum mi placerat ut. Maecenas venenatis sem dui, et sodales nulla porta sit amet. Vivamus sed dapibus tellus. Fusce turpis massa, vestibulum quis magna sit amet, faucibus tincidunt neque. Nam fringilla congue tincidunt. Etiam posuere justo a diam efficitur, et scelerisque urna consequat.

Site Links

underline link box link

<!-- HTML: Add a class to a standard link to create either an underline link or box link. -->
<a class="site-link--underline" href="##"" >Underline Link</a>
<a class="site-link--box" href="##"" >Box Link</a>

Site Buttons

Site Button Arrow Button Login Button

<!-- HTML: Add a site-button class to a button to add the standard site style, or try one of the variations to add an icon. -->
<button class="site-button" href="##"" >Site Button</button>
<button class="site-button--arrow" href="##"" >Arrow Button</button>
<button class="site-button--login" href="##"" >Login Button</button>

Foot Note Text

This text is for foot notes or other information that is to be displayed after pictures or content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus suscipit nisl sit amet malesuada placerat. Quisque cursus semper odio, id vulputate ipsum pulvinar non. In aliquam tristique odio, ac condimentum mi placerat ut. Maecenas venenatis sem dui, et sodales nulla porta sit amet. Vivamus sed dapibus tellus. Fusce turpis massa, vestibulum quis magna sit amet, faucibus tincidunt neque. Nam fringilla congue tincidunt. Etiam posuere justo a diam efficitur, et scelerisque urna consequat.

<!-- HTML: This is how you achieve the foot note style, use the specified class. -->
<p class="site__foot-notes">Foot notes go here.</p>

List Types

1. This is an ordered list.
2. It has multiple entries.
3. That are identified by their number.

<!-- HTML: This is the standard ordered list. -->
<ol>
 <li>This is an ordered list.</li>
 <li>It has multiple entries.</li>
 <li>That are identified by their number.</li>
</ol>

1. This is a nested ordered list.
2. It has multiple entries.
1. With multiple sub-entries
2. Like this!
3. That are identified by their number.

<!-- HTML: This is the nested ordered list. -->
<ol>
 <li>This is an ordered list.</li>
 <li>It has multiple entries.</li>
  <ol>
   <li>With multiple sub-entries</li>
   <li>Like this!</li>
  </ol>
 <li>That are identified by their number.</li>
</ol>

• This is an un-ordered list.
• It has multiple entries.
• That are identified by simply a bullet.

<!-- HTML: This is the unordered list. -->
<ul>
 <li>This is an un-ordered list.</li>
 <li>It has multiple entries.</li>
 <li>That are identified by simply a bullet.</li>
</ul>

• This is a nested un-ordered list.
• It has multiple entries.
• With multiple sub-entries
• Like this!
• That are identified by simply a bullet.

<!-- HTML: This is the nested unordered list. -->
<ul>
 <li>This is a nested un-ordered list.</li>
 <li>It has multiple entries.</li>
 <ul>
  <li>With multiple sub-entries</li>
  <li>Like this!</li>
 </ul>
 <li>That are identified by simply a bullet.</li>
</ul>

Table Types

Below is a standard table. Use the class "site-table" for this style.

<!-- HTML: Table with border and padding. Make table class site-table to get the above style. -->
<table class="site-table">
 <caption>Table Caption</caption>
 <tr>
  <th>Table Header 1</th>
  <th>Table Header 2</th>
  <th>Table Header 3</th>
 </tr>
 <tr>
  <td>Cell One</td>
  <td>Cell Two</td>
  <td>Cell Three</td>
 </tr>
 <tr>
  <td>Cell Four</td>
  <td>Cell Five</td>
  <td>Cell Six</td>
 </tr>
</table>

Below is a simple site table. Use the class "site-table--simple" for this style.

<!-- HTML: Simple table with border. Make table class site-table--simple to get the above style. -->
<table class="site-table--simple">
 <tr>
  <th>Table Header 1</th>
  <th>Table Header 2</th>
  <th>Table Header 3</th>
 </tr>
 <tr>
  <td>Cell One</td>
  <td>Cell Two</td>
  <td>Cell Three</td>
 </tr>
 <tr>
  <td>Cell Four</td>
  <td>Cell Five</td>
  <td>Cell Six</td>
 </tr>
</table>

Content Cards

<!-- HTML: Apply the content-card class with the content-card--shadow and content-card--hover-shadow modifier classes to create a inline content card..</p>

<div class="content-card content-card--shadow content-card--hover-shadow">
  <h4>This is a set of classes that can be applied to a standard div to create content cards:</h4>
  <ul> class="list-ws list-secondary">
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3 more text here</li>
    <li>Food manufacturing in proteins and grains</li>
    <li>Wine and spirits production and distribution</li>
    <li>Wholesale and retail food distribution</li>
    <li>Paper, steel and glass packaging</li>
    <li>Timber and forest products</li>
    <li>Rural infrastructire such as rural power, telecom and other utilities</li>
  </ul>
</div>

Site Panel

<!-- HTML: Apply the site-panel class to create a paneled background

<div class="site-panel">This is a class that can be applied to create a site panel</div>

Quote Text

Text will wrap around the quote text. Quoted text will pin to the right of the control that it is put in, with the text in any html blocks underneath the quoted text surrounds it to the left and bottom as it fills up the area.

You need to be a bit careful with quoted text because if the text surrounding it is not long enough, it will bleed into the sections underneath it.

<!-- HTML: Apply the quote-text class to create quotes around the text

<div class="quote-text">This is a class that can be applied to a standard div to create quoted text</li>
<p>Text will wrap around the quote text. Quoted text will pin to the right of the control that it is put in, with the text in any html blocks underneath the quoted text surrounds it to the left and bottom as it fills up the area.</p>
<p>You need to be a bit careful with quoted text because if the text surrounding it is not long enough, it will bleed into the sections underneath it.</p>

Image Formatting

By default, an image is left aligned in main content pages. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper vehicula massa a imperdiet. Donec id nisi hendrerit, ullamcorper mi sit amet, elementum turpis. Nam ultricies euismod porta. Donec et vehicula mauris, quis luctus erat. Suspendisse maximus bibendum semper. Nunc dolor felis, ultrices quis erat a, mattis pellentesque dui. Proin cursus ultrices lorem a porta. Sed feugiat nunc arcu, at bibendum ligula faucibus in.

<!-- HTML: The src tag controls the image, replace "someImage" with the actual external/internal image link. -->
<p><img alt="" src="someImage">Some paragraph text.</p>

This image is floated left, Notice how the text will wrap around the image as the paragraph grows in size in desktop mode. In mobile view the image appears above the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper vehicula massa a imperdiet. Donec id nisi hendrerit, ullamcorper mi sit amet, elementum turpis. Nam ultricies euismod porta. Donec et vehicula mauris, quis luctus erat. Suspendisse maximus bibendum semper. Nunc dolor felis, ultrices quis erat a, mattis pellentesque dui. Proin cursus ultrices lorem a porta. Sed feugiat nunc arcu, at bibendum ligula faucibus in.

<!-- HTML: The src tag controls the image, replace "someImage" with the actual external/internal image link. The image is floated to the left by the designated class.-->
<p><img alt="" class="image--left" src="someImage">Some paragraph text.</p>

This image is centered. Notice how the image stays above the text near it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper vehicula massa a imperdiet. Donec id nisi hendrerit, ullamcorper mi sit amet, elementum turpis. Nam ultricies euismod porta. Donec et vehicula mauris, quis luctus erat. Suspendisse maximus bibendum semper. Nunc dolor felis, ultrices quis erat a, mattis pellentesque dui. Proin cursus ultrices lorem a porta. Sed feugiat nunc arcu, at bibendum ligula faucibus in.

<!-- HTML: The src tag controls the image, replace "someImage" with the actual external/internal image link. The image is floated to the left by the designated class.-->
<p><img alt="" class="image--center" src="someImage"> <p><Some paragraph text.</p>

This image is floated right. Notice how the text will wrap around the image as the paragraph grows in size in desktop mode. In mobile view the image appears above the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper vehicula massa a imperdiet. Donec id nisi hendrerit, ullamcorper mi sit amet, elementum turpis. Nam ultricies euismod porta. Donec et vehicula mauris, quis luctus erat. Suspendisse maximus bibendum semper. Nunc dolor felis, ultrices quis erat a, mattis pellentesque dui. Proin cursus ultrices lorem a porta. Sed feugiat nunc arcu, at bibendum ligula faucibus in.

<!-- HTML: The src tag controls the image, replace "someImage" with the actual external/internal image link. The image is floated to the right by the designated class.-->
<p><img alt="" class="image--right" src="someImage">Some paragraph text.</p>

ISSUU Formatting

All ISSUU links are displayed on the site in a similar manner as below. The ISSUU will be as big as you set the iFrame's width & height. The ISSUU site also provides the embed code to copy into the editor. To find this navigate to the specific ISSUU article and click Share then Embed. Check off the alternative embed code option and copy the embed code ISSUU displays. It should be similar the the example below.

<!-- HTML: The src tag controls which ISSUU is displayed, replace "someISSUU" with the actual ISSUU link.-->
<iframe width="300" height="194" src="someISSUU" frameborder="0"></iframe>

Video Formatting

All YouTube Videos are displayed on the site in a similar manner as below. Videos will be the same width as their container.

 

<!-- HTML: The data-video-id tag controls the video, replace "someID" with the Youtube Video ID. For example, in the link https://youtu.be/dwH5Wy_JtSA, the Video ID is dwH5Wy_JtSA Wrap the video container with a div with class 'video-container--mid-size' or 'video-container--small' to make the embedded video smaller. -->
<div class="video-container">
 <div data-control="you-tube" data-video-id="someID"></div>
</div>

All Vimeo Videos are displayed on the site in a similar manner as below. Videos will be the same width as their container.

<!-- HTML: The src tag controls the video, replace "someSRC" with the Vimeo Video Link. For example, the above video has someSRC equal to "https://player.vimeo.com/video/126810025". -->
<div class="video-container">
 <iframe src="someSRC" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

Searching and Sorting HTML tables

Below is a html site table. Use the class "sortable" to add column sorting to the table. Also to implement the search box add a <input> form element and make sure the input bix has a class on it called data-table="simple list"

<!-- HTML: Simple table with border. Make table class sortable to get the above table to sort by columns. -->
<table id=MyTable class="site-table sortable simple-list">
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Cell One</td>
<td>Cell Two</td>
<td>Cell Three</td>
</tr>
<tr>
<td>Cell Four</td>
<td>Cell Five</td>
<td>Cell Six</td>
</tr>
</table>