Component Library

​​Page and section layout


Each page is broken into 12 invisible columns, and the content of your page is free to use all 12 at once or split them up. Column blocks can also be added inside of other elements (including themselves), so for example you can add a two column block insides a panel if you need to divide the contents inside of a panel.

Two column (even)

Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
 

Two Column (9/3)

Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
 

Two Column (3/9)

Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.


Two Column (8/4)

Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.



Two Column (4/8)

Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.




Three Column

Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.

Horizontal Rule

 

Blockquote

"Design is not just what it looks like and feels like. Design is how it works."
- Steve Jobs





Block Grids


Block grids are used when you want to have a repeating set of items, arranged in columns that repeat but stay aligned. Block grids will flow from left to right on large screens, but will stack on top of one another when the screen gets smaller. The order of the blocks will remain the same however.

Block Grid 2

  • Block
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
  • Block
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
  • Block
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.

Block Grid 3

 
  • Block
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
  • Block
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
  • Block
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
  • Block
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
  • Block
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
 

Block Grid 4

 
  • Block
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
  • Block
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
  • Block
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
  • Block
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
  • Block
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
  • Block
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
 




Page and Section Headings

 
While the page title will be automatically inserted and styled for you, additional heading on the page may be appropriate to use where the content dictates. It is important to use the appropriate type of heading, be it a section heading, subsection heading or panel heading, as this affects how pages are collapsed for display on mobile devices. The color of each heading is pre-set, but can be changed using the font color picker in the 'Format Text' portion of the editing ribbon.

Page Title


Section Header

Section Header


Subsection Heading

Subsection Heading


Panel Heading


Content Panels


Content panels are a way to frame certail portions of your content so that it stands out from the rest. They can also be used to delineate large sections of a page from one another or in conjunction with block panels to produce a tile effect. Several different color variations are available and can either lightly accentuate a section or cause major attention to be drawn to it, as appropriate. Default colors can be changed using the color picker in the ribbon, but minimum contrast levels will be enforced to maintain readability and accessibility.
 

  • Panel 1 Header

    Panel 1 dolor sit amet, consectetur adipiscing elit. Cras neque lorem, tristique at erat sed, fringilla vulputate est. Fusce lobortis, mi id imperdiet mattis, nibh neque sodales dui, et commodo libero ipsum sit amet felis. Aenean accumsan lacus sit amet eros sollicitudin, id

  • Panel 2 Header

    Panel 2 dolor sit amet, consectetur adipiscing elit. Cras neque lorem, tristique at erat sed, fringilla vulputate est. Fusce lobortis, mi id imperdiet mattis, nibh neque sodales dui, et commodo libero ipsum sit amet felis. Aenean accumsan lacus sit amet eros sollicitudin, id

  • Panel 3 Header

    Panel 3 dolor sit amet, consectetur adipiscing elit. Cras neque lorem, tristique at erat sed, fringilla vulputate est. Fusce lobortis, mi id imperdiet mattis, nibh neque sodales dui, et commodo libero ipsum sit amet felis. Aenean accumsan lacus sit amet eros sollicitudin, id

  • Panel 4 Header

    Panel 4 olor sit amet, consectetur adipiscing elit. Cras neque lorem, tristique at erat sed, fringilla vulputate est. Fusce lobortis, mi id imperdiet mattis, nibh neque sodales dui, et commodo libero ipsum sit amet felis. Aenean accumsan lacus sit amet eros sollicitudin, id

  • Panel 5 Header

    Panel 5 sit amet, consectetur adipiscing elit. Cras neque lorem, tristique at erat sed, fringilla vulputate est. Fusce lobortis, mi id imperdiet mattis, nibh neque sodales dui, et commodo libero ipsum sit amet felis. Aenean accumsan lacus sit amet eros sollicitudin, id

  • Panel 6 Header

    Panel 6 sit amet, consectetur adipiscing elit. Cras neque lorem, tristique at erat sed, fringilla vulputate est. Fusce lobortis, mi id imperdiet mattis, nibh neque sodales dui, et commodo libero ipsum sit amet felis. Aenean accumsan lacus sit amet eros sollicitudin, id

  • Panel 7 Header

    Panel 7 dolor sit amet, consectetur adipiscing elit. Cras neque lorem, tristique at erat sed, fringilla vulputate est. Fusce lobortis, mi id imperdiet mattis, nibh neque sodales dui, et commodo libero ipsum sit amet felis. Aenean accumsan lacus sit amet eros sollicitudin, id

  • Panel 8 Header

    Panel 8 dolor sit amet, consectetur adipiscing elit. Cras neque lorem, tristique at erat sed, fringilla vulputate est. Fusce lobortis, mi id imperdiet mattis, nibh neque sodales dui, et commodo libero ipsum sit amet felis. Aenean accumsan lacus sit amet eros sollicitudin, id

  • Panel 9 Header

    Panel 9 sit amet, consectetur adipiscing elit. Cras neque lorem, tristique at erat sed, fringilla vulputate est. Fusce lobortis, mi id imperdiet mattis, nibh neque sodales dui, et commodo libero ipsum sit amet felis. Aenean accumsan lacus sit amet eros sollicitudin, id

  • Panel 10 Header

    Panel 10 sit amet, consectetur adipiscing elit. Cras neque lorem, tristique at erat sed, fringilla vulputate est. Fusce lobortis, mi id imperdiet mattis, nibh neque sodales dui, et commodo libero ipsum sit amet felis. Aenean accumsan lacus sit amet eros sollicitudin, id

Panel with Even Height

 Use this when you want to have panels next to one another that are the same height, regardless of how much content is in them. The tallest panel in any row will be used to set the height of all other panels in that row. The height of panels in one row will not affect the height of panels in other rows.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.                
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.                
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in cursus leo. Donec dignissim eu tortor non dapibus. Fusce aliquet ante lectus. Suspendisse ut quam accumsan, convallis ante id, dapibus velit. In ultricies laoreet aliquam. Nunc libero arcu, tempor a pellentesque eget, tincidunt sit amet dolor.        

Title Panel

Add title here
Add content here

Buttons

 

Contact Cards

 
  • Name
  • Title
  • Department
  • Street Address
  • City, State ZIP
  • Phone
  • Fax
  • photo
  • Name
  • Title
  • Department
  • Street Address
  • City, State ZIP
  • Phone
  • Fax