Code samples

Copy the code samples, replace the temporary content with your own, then put it into your pages.

 

<!-- THIS IS A COMMENT. YOU DON'T NEED TO COPY IT. -->
<img src="/sites/default/files/YOURIMAGENAME.jpg" class="img-left" style="max-width: 30%"> <!-- THIS IS AN IMAGE, FLOATED LEFT. SET THE WIDTH WITH %'s -->
<img src="/sites/default/files/YOURIMAGENAME.jpg" class="img-right" style="max-width: 30%"> <!-- THIS IS AN IMAGE, FLOATED RIGHT. SET THE WIDTH WITH %'s -->
<!-- THIS IS HOW TO PUT A VIDEO IN A PAGE. 
NOTICE THE "large-12". OUR GRID IS BASED ON A 12-COLUMN GRID. 
IF YOU WANT THE VIDEO TO ONLY BE 50% THE WIDTH OF THE PAGE, 
THEN MAKE IT "col large-6" AND SO ON. YOU MAY ALSO ADD 
CLASSES OF "centered" or "right" to the "col large-12" 
rule like this: "col large-6 centered". -->

<div class="col large-12"><div class="flex-video">INSERT VIDEO EMBED CODE HERE</div></div>
<p>Your paragraph of text goes here</p> <!-- THIS IS A PARAGRAPH TAG -->
<h1>Use only for page titles</h1> <!-- THIS IS AN H1 HEADING TAG -->
<h2>Use for major page sections</h2> <!-- THIS IS AN H2 HEADING TAG -->
<h3>Use this for sub-sections</h3> <!-- THIS IS AN H4 HEADING TAG -->
<h4>Further breakdown for sub-sections</h4> <!-- THIS IS AN H5 HEADING TAG -->
<h5>Further breakdown for sub-sections</h5> <!-- THIS IS AN H6 HEADING TAG -->
<ul> <!-- THIS IS AN UNORDERED LIST - USES DOTS -->
  <li>content</li>
</ul>
<ol> <!-- THIS IS AN ORDERED LIST - USES NUMBERS-->
  <li>content</li>
</ol>

H1 headings are for page titles. Only use them once.

short description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus at nisi eget cursus. Integer rhoncus, metus non bibendum consectetur, lacus ipsum faucibus justo, id euismod nibh ante vitae velit. Aliquam ornare elementum tincidunt. Integer vehicula, sem vel fermentum auctor, magna lacus fermentum dolor, auctor suscipit turpis est aliquam sapien. Nunc est erat, aliquet sit amet dictum viverra, malesuada id turpis. Phasellus est justo, efficitur at nisl et, ornare pretium nisl. Quisque dapibus, enim ac laoreet commodo, felis justo mollis turpis, vitae hendrerit lorem sapien scelerisque diam. Vestibulum interdum quam at leo faucibus, sed lacinia odio pharetra. Etiam euismod a augue vitae vulputate. Phasellus quis nulla a elit facilisis venenatis. Mauris iaculis aliquam mi, quis iaculis orci condimentum ut. Duis fringilla in diam et scelerisque. Donec a lorem dignissim, suscipit eros vel, eleifend ex.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer venenatis magna enim, quis condimentum dui accumsan vitae. Nunc congue ante at congue semper. Praesent et massa lobortis, elementum magna et, sodales purus. Nam consectetur felis leo, vitae vehicula erat facilisis vel. Donec sodales nisi est, id viverra ante pulvinar et. In id sodales urna, a malesuada nisi. Suspendisse dignissim ante sed nulla laoreet, vel pellentesque purus condimentum. Vestibulum sodales augue ut velit sodales, vitae cursus ante gravida. Sed tortor dui, dignissim quis lacus id, blandit feugiat augue. Cras ultrices felis sit amet sapien auctor scelerisque.

short description

This is an H2 heading. These are for separating major sections of your page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus at nisi eget cursus. Integer rhoncus, metus non bibendum consectetur, lacus ipsum faucibus justo, id euismod nibh ante vitae velit. Aliquam ornare elementum tincidunt. Integer vehicula, sem vel fermentum auctor, magna lacus fermentum dolor, auctor suscipit turpis est aliquam sapien. Nunc est erat, aliquet sit amet dictum viverra, malesuada id turpis. Phasellus est justo, efficitur at nisl et, ornare pretium nisl. Quisque dapibus, enim ac laoreet commodo, felis justo mollis turpis, vitae hendrerit lorem sapien scelerisque diam. Vestibulum interdum quam at leo faucibus, sed lacinia odio pharetra. Etiam euismod a augue vitae vulputate. Phasellus quis nulla a elit facilisis venenatis. Mauris iaculis aliquam mi, quis iaculis orci condimentum ut. Duis fringilla in diam et scelerisque. Donec a lorem dignissim, suscipit eros vel, eleifend ex.

H3 headings are for sub-sections. They are quite useful.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer venenatis magna enim, quis condimentum dui accumsan vitae. Nunc congue ante at congue semper. Praesent et massa lobortis, elementum magna et, sodales purus. Nam consectetur felis leo, vitae vehicula erat facilisis vel. Donec sodales nisi est, id viverra ante pulvinar et. In id sodales urna, a malesuada nisi. Suspendisse dignissim ante sed nulla laoreet, vel pellentesque purus condimentum. Vestibulum sodales augue ut velit sodales, vitae cursus ante gravida. Sed tortor dui, dignissim quis lacus id, blandit feugiat augue. Cras ultrices felis sit amet sapien auctor scelerisque.

These H4 headers are good for less important items. Here's an unordered list.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Suspendisse dapibus at nisi eget cursus
  • Integer rhoncus, metus non bibendum
  • Consectetur, lacus ipsum faucibus justo
  • Id euismod nibh ante vitae velit
  • Aliquam ornare elementum tincidunt
  • Integer vehicula
  • Sem vel fermentum auctor
  • Magna lacus fermentum dolor sapien

Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer venenatis magna enim, quis condimentum dui accumsan vitae. Nunc congue ante at congue semper. Praesent et massa lobortis, elementum magna et, sodales purus. Nam consectetur felis leo, vitae vehicula erat facilisis vel. Donec sodales nisi est, id viverra ante pulvinar et. In id sodales urna, a malesuada nisi. Suspendisse dignissim ante sed nulla laoreet, vel pellentesque purus condimentum. Vestibulum sodales augue ut velit sodales, vitae cursus ante gravida. Sed tortor dui, dignissim quis lacus id, blandit feugiat augue. Cras ultrices felis sit amet sapien auctor scelerisque.

These H4 headers are good for less important items. Here's an ordered list.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Suspendisse dapibus at nisi eget cursus
  4. Integer rhoncus, metus non bibendum
  5. Consectetur, lacus ipsum faucibus justo
  1. Id euismod nibh ante vitae velit
  2. Aliquam ornare elementum tincidunt
  3. Integer vehicula
  4. Sem vel fermentum auctor
  5. Magna lacus fermentum dolor sapien
The H5 is about the smallest header you're going to use

Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer venenatis magna enim, quis condimentum dui accumsan vitae. Nunc congue ante at congue semper. Praesent et massa lobortis, elementum magna et, sodales purus. Nam consectetur felis leo, vitae vehicula erat facilisis vel. Donec sodales nisi est, id viverra ante pulvinar et. In id sodales urna, a malesuada nisi. Suspendisse dignissim ante sed nulla laoreet, vel pellentesque purus condimentum. Vestibulum sodales augue ut velit sodales, vitae cursus ante gravida. Sed tortor dui, dignissim quis lacus id, blandit feugiat augue. Cras ultrices felis sit amet sapien auctor scelerisque.

However, there are H6 headers as well

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus at nisi eget cursus. Integer rhoncus, metus non bibendum consectetur, lacus ipsum faucibus justo, id euismod nibh ante vitae velit. Aliquam ornare elementum tincidunt. Integer vehicula, sem vel fermentum auctor, magna lacus fermentum dolor, auctor suscipit turpis est aliquam sapien. Nunc est erat, aliquet sit amet dictum viverra, malesuada id turpis. Phasellus est justo, efficitur at nisl et, ornare pretium nisl. Quisque dapibus, enim ac laoreet commodo, felis justo mollis turpis, vitae hendrerit lorem sapien.

Vestibulum interdum quam at leo faucibus, sed lacinia odio pharetra. Etiam euismod a augue vitae vulputate. Phasellus quis nulla a elit facilisis venenatis. Mauris iaculis aliquam mi, quis iaculis orci condimentum ut. Duis fringilla in diam et scelerisque. Donec a lorem dignissim, suscipit eros vel, eleifend ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer venenatis magna enim, quis condimentum dui accumsan vitae. Nunc congue ante at congue semper. Praesent et massa lobortis, elementum magna et, sodales purus. Nam consectetur felis leo, vitae vehicula erat facilisis vel.

Donec sodales nisi est, id viverra ante pulvinar et. In id sodales urna, a malesuada nisi. Suspendisse dignissim ante sed nulla laoreet, vel pellentesque purus condimentum. Vestibulum sodales augue ut velit sodales, vitae cursus ante gravida. Sed tortor dui, dignissim quis lacus id, blandit feugiat augue. Cras ultrices felis sit amet sapien auctor scelerisque. Donec sodales nisi est, id viverra ante pulvinar et. Nunc est erat, aliquet sit amet dictum viverra, malesuada id turpis. Phasellus est justo, efficitur at nisl et, ornare pretium nisl. Quisque dapibus, enim ac laoreet commodo.

The Big Grid Test

Large 6
Large 6
Nested Large 3
Nested Large 9
Nested Large 9
Nested Large 3
Large 12
Large 6
Large 6
Large 3
large-6 SNested
large-6 SNested
Nested Large 9
Nested Large 3
Large 5th
Large 5th
Large 5th
Large 5th
Large 5th
Large 7th
Large 7th
Large 7th
Large 7th
Large 7th
Large 7th
Large 7th
Large 8th
Large 8th
Large 8th
Large 8th
Large 8th
Large 8th
Large 8th
Large 8th

To test the infamous H1 in the middle of the page. Never do it, just don't do it.

To test a long header H2, we type arbitrary words and sentence fragments that often have no meaning whatsoever. Why do we do it? Because we can, and so we do.

And in exchange, leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.

To test a long header H3. And in exchange, I'll ask for higher standards and more accountability. 9/11 was an enormous trauma to our country.

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.

  • Podcasting operational change management inside of workflows to establish a framework.
  • Taking seamless key performance indicators offline to maximise the long tail.
  • Keeping your eye on the ball while performing a deep dive.
  • Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.

To test a long header H4. And in exchange, I'll ask for higher standards and more accountability. 9/11 was an enormous trauma to our country.

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.

To test a long header H5. And in exchange, I'll ask for higher standards and more accountability. 9/11 was an enormous trauma to our country.

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.

Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.

Block Grid Image Gallery Sample

Accordion & Tabs Sample

  • Accordion 1
    Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Accordion 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis fringilla urna, ac tincidunt est. Suspendisse mattis pharetra dolor, et fermentum nibh malesuada vel. Donec sed sollicitudin nunc. Fusce a tortor eu neque efficitur sollicitudin et eu justo. Donec id urna magna. Sed magna eros, placerat nec quam quis, finibus ultrices diam. Aliquam ornare dapibus nisi, aliquam tincidunt tortor semper eu. Duis quis odio eu lectus viverra facilisis quis vitae nisi. Suspendisse bibendum, mi id efficitur malesuada, eros orci euismod magna, sed pretium ex dolor sed nisi. Praesent aliquam, velit ut scelerisque euismod, diam dolor efficitur massa, ac vulputate est purus a sem. Curabitur non odio in tellus sodales sodales.

  • Accordion 3
    Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

This is the first panel of the basic tab example. You can place all sorts of content here including a grid.

This is the second panel of the basic tab example. This is the second panel of the basic tab example.

This is the third panel of the basic tab example. This is the third panel of the basic tab example.

This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.

Inline Elements

Bacon ipsum dolor sit amet capicola flank tail pancetta sausage, leberkas tenderloin pork chop ham jerky bacon pork belly shoulder fatback.

Tenderloin chuck sausage rump, bresaola shankle pork loin jerky hamburger tongue tail bacon ground round. Pork cow jerky porchetta, turducken pork chop biltong frankfurter. Chicken tenderloin short ribs kielbasa. Andouille pancetta ball tip, meatloaf short loin pork capicola venison tongue sausage prosciutto biltong jerky chuck.

Bacon ipsum dolor sit amet tail rump.
Bacon ipsum dolor sit amet tail rump.
Bacon ipsum dolor sit amet tail rump.
Bacon ipsum dolor sit amet tail rump.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis fringilla urna, ac tincidunt est. Suspendisse mattis pharetra dolor, et fermentum nibh malesuada vel. Donec sed sollicitudin nunc. Fusce a tortor eu neque efficitur sollicitudin et eu justo. Donec id urna magna. Sed magna eros, placerat nec quam quis, finibus ultrices diam. Aliquam ornare dapibus nisi, aliquam tincidunt tortor semper eu. Duis quis odio eu lectus viverra facilisis quis vitae nisi. Suspendisse bibendum, mi id efficitur malesuada, eros orci euismod magna, sed pretium ex dolor sed nisi. Praesent aliquam, velit ut scelerisque euismod, diam dolor efficitur massa, ac vulputate est purus a sem. Curabitur non odio in tellus sodales sodales.

Sirloin tail chuck

SHOW FOR SMALL. Bacon ipsum dolor sit amet capicola flank tail pancetta sausage, leberkas tenderloin pork chop ham jerky bacon pork belly shoulder fatback. Tenderloin chuck sausage rump, bresaola shankle pork loin jerky hamburger tongue tail bacon ground round. Pork cow jerky porchetta, turducken pork chop biltong frankfurter. Chicken tenderloin short ribs kielbasa. Andouille pancetta ball tip, meatloaf short loin pork capicola venison tongue sausage prosciutto biltong jerky chuck. Sirloin tail chuck, shoulder beef tongue andouille bresaola ham hock.

Beef turkey pancetta ribeye pork chop tri-tip

Pastrami rump landjaeger boudin bresaola meatloaf. Venison short loin ball tip turducken meatloaf ham pancetta jowl doner corned beef. Shoulder t-bone sirloin shank, meatloaf venison strip steak. Prosciutto bresaola ribeye landjaeger meatloaf, t-bone swine.

Bacon ipsum dolor sit amet tail rump.
Bacon ipsum dolor sit amet tail rump.
Bacon ipsum dolor sit amet tail rump.
Bacon ipsum dolor sit amet tail rump.