Style Guide

Sections

    Also See


    Colors


    • Primary Green
    • Secondary Green
    • Text Color
    • Gray
    • Alt Gray
    • Black
    • White


    Fonts


    Lato - The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id maximus ipsum. Donec pharetra mi nec purus, Bold - cursus id ullamcorper turpis vestibulum. Italic - Donec vitae eleifend felis.

    Montserrat The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id maximus ipsum. Donec pharetra mi nec purus, Bold - cursus id ullamcorper turpis vestibulum. Italic - Donec vitae eleifend felis.

    Typography


    Headings

    Heading 1 Lorem ipsum dolor sit amet

    Sample body copy to see headline margins duis vehicula facilisis justo, a consectetur sem viverra sit amet. Mauris id diam augue. Nam id volutpat mauris. Cras eget porttitor odio, vel congue elit. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    Heading 2 Lorem ipsum dolor sit amet

    Sample body copy to see headline margins duis vehicula facilisis justo, a consectetur sem viverra sit amet. Mauris id diam augue. Nam id volutpat mauris. Cras eget porttitor odio, vel congue elit. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    Heading 3 Lorem ipsum dolor sit amet

    Sample body copy to see headline margins duis vehicula facilisis justo, a consectetur sem viverra sit amet. Mauris id diam augue. Nam id volutpat mauris. Cras eget porttitor odio, vel congue elit. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    Heading 4 Lorem ipsum dolor sit amet

    Sample body copy to see headline margins duis vehicula facilisis justo, a consectetur sem viverra sit amet. Mauris id diam augue. Nam id volutpat mauris. Cras eget porttitor odio, vel congue elit. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    Heading 5 Lorem ipsum dolor sit amet

    Sample body copy to see headline margins duis vehicula facilisis justo, a consectetur sem viverra sit amet. Mauris id diam augue. Nam id volutpat mauris. Cras eget porttitor odio, vel congue elit. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    Heading 6 Lorem ipsum dolor sit amet

    Sample body copy to see headline margins duis vehicula facilisis justo, a consectetur sem viverra sit amet. Mauris id diam augue. Nam id volutpat mauris. Cras eget porttitor odio, vel congue elit. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    Paragraphs

    Normal Text. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    Large Text. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    Small Text. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    Ellipsis

    truncates the text and adds a '...' if the text goes too long

    Ellipsis text. This only shows 50% of the width. Lorem ipsum dolor sit amet, consectetur adipiscing 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.




    Lists


    Unordered List

    • Dicta optio cumque dolore hic ea facilis
    • Dicta optio cumque dolore hic ea facilis
    • Lorem ipsum dolor sit amet.
      • Lorem ipsum dolor sit amet.
      • Lorem ipsum dolor sit amet.
      • Lorem ipsum dolor sit amet.
      • Lorem ipsum dolor sit amet.

    List Root Details

    List Root:

    List Item Details

    • List Item:

    Ordered List

    Example

    1. Dicta optio cumque dolore hic ea facilis
    2. Dicta optio cumque dolore hic ea facilis
    3. Lorem ipsum dolor sit amet.
      1. Lorem ipsum dolor sit amet.
      2. Lorem ipsum dolor sit amet.
      3. Lorem ipsum dolor sit amet.
      4. Lorem ipsum dolor sit amet.

    List Root Details

    List Root:

    List Item Details

    1. List Item:

    Forms


    Input Fields

    Choose a Radio Button:

    Check some checkboxes:


    UI Patterns


    Tabs

    winbpe hj c

    urdavidnvsqk

    Tab 3


    5 Column Grid

    Uses a custom column class that extends our bootstrap grid to accomidate 5 column. Class is like .col-md-5ths.
    The grid on our site uses 5 items on desktop, 3 on tablet, and 2 on mobile.

    Tile 0

    Tile 1

    Tile 2

    Tile 3

    Tile 4

    Tile 5

    Tile 6

    Tile 7

    Tile 8

    Tile 9


    Grid Item Scroller

    Shows as a 5 column grid on desktop and switches to a carousel on tablet and mobile. This uses our 5 column grid (above) and custom functionality for the "item scroller"

    Note that the item width should probably be set for each component

    Tile 0

    Tile 1

    Tile 2

    Tile 3

    Tile 4

    Tile 5

    Tile 6

    Tile 7

    Tile 8

    Tile 9


    Item Scroller

    Carousel only on tablet and mobile. Note that the width of the items should probably be set on mobile based on the content

    Add a class of 'scroller-row' on the row div.

    Tile 0

    Tile 1

    Tile 2

    Tile 3

    Tile 4

    Tile 5

    Tile 6

    Tile 7

    Tile 8

    Tile 9

    Outside of the grid

    Can also target the breaktpoints that start the scroller ie scroller-row-md. Note that the item size should probably be coded ased on the content in mobile.

    Tile 0

    Tile 1

    Tile 2

    Tile 3

    Tile 4

    Tile 5

    Tile 6

    Tile 7

    Tile 8

    Tile 9

    3 Column Item List

    Straight up bootstrap columns

    Tile 0

    Tile 1

    Tile 2

    Tile 3

    Tile 4

    Tile 5

    Three column list class

    KM: I don't think this needed any more and we should just use the bootstrap columngs (see above)

    • Tile 0

    • Tile 1

    • Tile 2

    • Tile 3

    • Tile 4

    • Tile 5