Fonts & Headings   |   Body Text   |   Lists   |   Block Quote   |   Tables   |   Button   |   Images   |   Map Embed   |   Accordion

Administrators Guide 

Fonts

Source Sans Pro (Google font) is the font family used for all site typography. The Drupal 8 CMS automatically applies the styles when the appropriate style format is applied. Where the unit rem is used, 1rem = 10px. In paragraphs "<p>" there is 10px at the margin-bottom.

Important note: H1 Headings Are Used in the page Title area, or hero area only. 

There are a variety of font styles available via the Format dropdown menu in the content editor. To select a font style:

1. Highlight the text you wish to format

2. Select the style from the Format dropdown menu

BEST PRACTICE: Each page should have only one Heading 1. The Title field adds the title to the page as a Heading 1 so you should not add other Heading 1 formatting within the page.

H2 Heading Tag Example 
This is a Second Line Example

The Heading 2 style is 30px, font-weight 700, color #53565a (dark gray) using title case style with margin-top 20px and margin-bottom 10px. 

    H3 Heading Style Example
    This is a Second Line Example

    The Heading 3 style is 2.4 rem font-weight 700, color ##53565a (dark gray) using . title case style with margin-top 20px and margin-bottom 10px. 

     

    The following heading styles are used infrequently:

    H4 Heading Style Example 
    This is a Second Line Example

    H5 Heading Style Example
    This is a Second Line Example
    H6 Heading Style Example 
    This is a Second LIne Example

    Body Paragraph

    Body paragraphs use Open Sans, font-size 1.6 rem, line-height: normal, color #53565a This is default, primary body text and non-header text used throughout the site. Contextual anchor link text is normal state color #337ab7 (active) and #007fe4 on hover, with an underline in active, normal state. This is an example of inline bold text, and this is an example of inline italicized text.

    Example text to show flow between paragraphs: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae cum dixisset, finem ille. Tum Piso: Atqui, Cicero, inquit, ista studia, si ad imitandos summos viros spectant, ingeniosorum sunt.


    Lists

    This is an example of an unordered list.  

    • Bullet with text with a link to another page.
      • This is a second-level unordered list style. Subbullet with a pdf link uploaded as an inline pdf file (PDF) attachment. File attachments are denoted as to type using (PDF), (DOC), (XLS), etc.
      • This is a second-level unordered list style. Subbullet with another file uploaded here is an example of a different pdf. 
    • Bullet with text with a link to another page. 

    This is an example of an ordered list. 

    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    2. Quae cum dixisset, finem illie. 

    Horizontal Line

    There is an example of a horizontal line above and below this section. 


    Block Quote

    This is an example of a block quote. It can be used for call-out text for emphasis and for quotations. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

     


    Table Style

    Tables require header row and/or column and caption identified in Table Properties. In addition, border =1, cell padding = 5.

    Caption Example – Dairy Inspection Responsibilities
    Inspection Frequency Who Performs Number of Facilities
    Grade "A" Farm Inspections 2 times per year Dairy Inspectors About 2750 Grade "A" Farms
    Grade "A" Plant Inspections 4 times per year Dairy Inspectors 26 Grade "A" Processing Plants
    High Temp Short Time (HTST) Pasteurizers 4 times per year (Grade A); 2 times per year (Manufacturing) Dairy Inspectors 42 Grade Pasteurizers, 55 Manufacturing Grade Pasteurizers

    Button Style

     

     

    Map Embed

    Embeded map with link to larger map portal page

    PLANTING RECOMMENDATIONS

    Planting can be accomplished with seed, bareroot plants, containerized plants, or by transplanting. The very tiny seeds (90,000 seeds per ounce) should be broadcast on the soil surface in areas with partial shade to full sun
    and moist soils.

    Hero option 6
    test

     Insert an image

    plant
    Plant icon - caption not required

     

     


    Accordion Style

    Accordion Instructions

    Place your text here. Lorem ipsum dolar amet.  Right click on the accordion in the wysiwyg editor to add, delete or rearrange accordions. 

    Accordion Two

    Place your text here. Lorem ipsum dolar amet. 

     

    Contact

    Jenny Gieseke
    Organizational Effectiveness Manager
    Mary Juhl
    Communications Coordinator