Style Guide - McDonalds

Typography

Documentation and examples for typography, including global settings, headings, body text, lists, and more.

Global settings

Startkit sets basic global display, typography, and link styles. When more control is needed, check out the assets/scss/base/_typography.scss file.

  • For a more inclusive and accessible type scale, the default root font-size is 16px.
  • Use the $regular-font, $headline-font, $font-size-base, and $line-height-base attributes as our typographic base applied to the <html>.
  • Set the global link color via $link-color.
  • Use $page-bg to set a background-color on the <html> (#fff by default).

These styles can be found within _fonts.scss, and the global color variables are defined in _colors.scss. Make sure to set $font-size-base in px.

Headings

All HTML headings, <h1> through <h6>, are available.

Heading Example
<h1></h1> h1. Heading
<h2></h2> h2. Heading
<h3></h3> h3. Heading
<h4></h4> h4. Heading
<h5></h5> h5. Heading
<h6></h6> h6. Heading 
                    
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading

h6. Heading

                    
<p class="h1">h1. Heading</p>
<p class="h2">h2. Heading</p>
<p class="h3">h3. Heading</p>
<p class="h4">h4. Heading</p>
<p class="h5">h5. Heading</p>
<p class="h6">h6. Heading</p>

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
                    
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Display headings are configured inside assets/scss/base/_typography.scss file.

Buttons

Documentation and examples for buttons, including global settings, variants and colors.

Button types

Solid Button Primary Solid Button Outline Button 
                        
get_partial('components/button', [
    'class' => 'btn--solid',
    'href' => '#',
    'buttonText' => 'Solid Button'
]);
get_partial('components/button', [
    'class' => 'btn--solid btn--primary',
    'href' => '#',
    'buttonText' => 'Primary Solid Button'
]);
get_partial('components/button', [
    'class' => 'btn--outline',
    'href' => '#',
    'buttonText' => 'Outline Button'
]);

get_partial('components/button', [
    'type' => 'button',
    'buttonText' => 'Type button'
]);