• Display Heading

    These headings are designed for more impact than regular headings, but should be used sparingly in content areas, so it doesn't detract from the outer layout elements. There are also specific sizes for these, large and huge.

    Buttons

    Displaying the different states of interaction

    Standard Buttons

    Primary Secondary

    Ghosted Buttons

    Primary Ghost Secondary Ghost White Ghost

  • Typefaces

    Typefaces used throughout the project

    Primary Typeface

    Some brief information about the typeface, including weights included for web use.

    Colours

    Brand and complimentary colours

Lede

Introduction paragraph, useful for news & blog articles

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 nisuis aute irure dolor in.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Body Copy

Normal text style, displaying link styles as well

Nam pharetra aliquet interdum. Phasellus nibh elit, fermentum ac gravida sagittis, accumsan non mi. Fusce ullamcorper, elit eget scelerisque tincidunt, tellus quam tincidunt mi, et sodales sem urna vel diam. Integer a ante lectus. Morbi eu tempus erat. Vivamus vulputate placerat dapibus. In pharetra vel diam nec rutrum. Fusce placerat ipsum sed lacus pharetra vulputate. Donec a tristique ipsum. Proin volutpat lacinia sodales. Ut luctus venenatis leo at bibendum. Donec porttitor, odio sed auctor suscipit, dui tellus lobortis arcu, ut posuere tortor augue eu justo. Proin dapibus eros ultrices sodales sodales.

Headings

Standard heading styles H1 to H6

Heading 1

Pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien. Nam facilisis eros vitae bibendum vehicula. Nam aliquet semper hendrerit. Nulla vel dignissim justo. Nunc ipsum libero, auctor in posuere vel, dignissim et ipsum. Phasellus in neque in est posuere semper non nec lacus. Cras accumsan vulputate felis.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Heading 3

Nam pharetra aliquet interdum. Phasellus nibh elit, fermentum ac gravida sagittis, accumsan non mi. Fusce ullamcorper, elit eget scelerisque tincidunt, tellus quam tincidunt mi, et sodales sem urna vel diam. Integer a ante lectus. Morbi eu tempus erat. Vivamus vulputate placerat dapibus. In pharetra vel diam nec rutrum. Fusce placerat ipsum sed lacus pharetra vulputate. Donec a tristique ipsum. Proin volutpat lacinia sodales. Ut luctus venenatis leo at bibendum. Donec porttitor, odio sed auctor suscipit, dui tellus lobortis arcu, ut posuere tortor augue eu justo.

Heading 4

Pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien. Nam facilisis eros vitae bibendum vehicula. Nam aliquet semper hendrerit. Nulla vel dignissim justo. Nunc ipsum libero, auctor in posuere vel, dignissim et ipsum. Phasellus in neque in est posuere semper non nec lacus. Cras accumsan vulputate felis.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Heading 6

Nam pharetra aliquet interdum. Phasellus nibh elit, fermentum ac gravida sagittis, accumsan non mi. Fusce ullamcorper, elit eget scelerisque tincidunt, tellus quam tincidunt mi, et sodales sem urna vel diam. Integer a ante lectus. Morbi eu tempus erat. Vivamus vulputate placerat dapibus. In pharetra vel diam nec rutrum. Fusce placerat ipsum sed lacus pharetra vulputate. Donec a tristique ipsum. Proin volutpat lacinia sodales. Ut luctus venenatis leo at bibendum. Donec porttitor, odio sed auctor suscipit, dui tellus lobortis arcu, ut posuere tortor augue eu justo.

Blockquote

To emphasize short quotes

"Lorem ipsum dolor sit amet tempor incididunt ut labore et dolore magna aliqua do eiusmod incididunt. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."

Pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien. Nam facilisis eros vitae bibendum vehicula. Nam aliquet semper hendrerit. Nulla vel dignissim justo. Nunc ipsum libero, auctor in posuere vel, dignissim et ipsum. Phasellus in neque in est posuere semper non nec lacus. Cras accumsan vulputate felis.


Nam pharetra aliquet interdum. Phasellus nibh elit, fermentum ac gravida sagittis, accumsan non mi. Fusce ullamcorper, elit eget scelerisque tincidunt, tellus quam tincidunt mi, et sodales sem urna vel diam. Integer a ante lectus. Morbi eu tempus erat. Vivamus vulputate placerat dapibus. In pharetra vel diam nec rutrum. Fusce placerat ipsum sed lacus pharetra vulputate. Donec a tristique ipsum. Proin volutpat lacinia sodales. Ut luctus venenatis leo at bibendum. Donec porttitor, odio sed auctor suscipit, dui tellus lobortis arcu, ut posuere tortor augue eu justo.

Lists

Standard and numbered lists

  • Pellentesque quis ultricies enim, a congue magna.
  • Aenean eget bibendum sapien.
  • Nulla vel dignissim justo.
    1. Duis aute irure dolor in reprehenderit.
    2. Fusce ullamcorper, elit eget scelerisque tincidunt, tellus quam tincidunt mi, et sodales sem urna vel diam.
      • Aenean eget bibendum sapien.
      • Nam pharetra aliquet interdum.
      • Nulla vel dignissim justo.
    3. Aenean eget bibendum sapien.
  • Pellentesque quis ultricies enim, a congue magna.
  • Nam pharetra aliquet interdum.

Nam pharetra aliquet interdum. Phasellus nibh elit, fermentum ac gravida sagittis, accumsan non mi. Fusce ullamcorper, elit eget scelerisque tincidunt, tellus quam tincidunt mi, et sodales sem urna vel diam. Integer a ante lectus. Morbi eu tempus erat. Vivamus vulputate placerat dapibus. In pharetra vel diam nec rutrum. Fusce placerat ipsum sed lacus pharetra vulputate. Donec a tristique ipsum. Proin volutpat lacinia sodales. Ut luctus venenatis leo at bibendum. Donec porttitor, odio sed auctor suscipit, dui tellus lobortis arcu, ut posuere tortor augue eu justo.

Tables

Standard table styling

Table Column Name Another Column
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Column content.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Column content.
Lorem ipsum dolor sit amet. Column content.
Tempor incididunt ut labore et dolore magna aliqua. Column content.

Pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien. Nam facilisis eros vitae bibendum vehicula. Nam aliquet semper hendrerit. Nulla vel dignissim justo. Nunc ipsum libero, auctor in posuere vel, dignissim et ipsum. Phasellus in neque in est posuere semper non nec lacus. Cras accumsan vulputate felis.

Icons

All of the svg icons available within the project.

Icons

This shows the entire entypo icon set as svg files. We have included this in every project, however only a fraction of these icons will ultimately be used on the website. Because of how we are loading the icons, keeping the entire set doesn't impact load time (if they're not called, they're not loaded).

Pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien. Nam facilisis eros vitae bibendum vehicula. Nam aliquet semper hendrerit. Nulla vel dignissim justo. Nunc ipsum libero, auctor in posuere vel, dignissim et ipsum. Phasellus in neque in est posuere semper non nec lacus. Cras accumsan vulputate felis.

Form Elements

  • This field is for validation purposes and should be left unchanged.

Features

The various feature and grid styles used throughout the website. These are defined in the inc/mttr-features.php file.

  • Feature Style: Secondary Grid
    • Heading

      Lorem ipsum dolor pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien.

    • Heading

      Lorem ipsum dolor pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien.

    • Heading

      Lorem ipsum dolor pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien.

  • Feature Style: Listing
      • Heading

        Lorem ipsum dolor pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien.

      • Heading

        Lorem ipsum dolor pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien.

      • Heading

        Lorem ipsum dolor pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien.

  • Feature Style: Testimonials
      • Lorem ipsum dolor pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien.

        Heading
      • Lorem ipsum dolor pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien.

        Heading
      • Lorem ipsum dolor pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien.

        Heading
  • Feature Style: Document Listing
      • Heading
      • Heading
      • Heading
  • Feature Style: Accordion Listing
    • Heading

      Lorem ipsum dolor pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien.

    • Heading

      Lorem ipsum dolor pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien.

    • Heading

      Lorem ipsum dolor pellentesque quis ultricies enim, a congue magna. Aenean eget bibendum sapien.

Hero Units

The various hero units used throughout the website. These are defined in the inc/mttr-heroes.php file.

Hero Style: Home Page
Hero Style: Standard

Styleguide

Hero Style: Image Only
Hero Style: Text
  • Styleguide

Styleguide