Use of Headers, h1-h6

***These need to be used properly and not just to assign styles or sizes to heading text. Assign headers correctly then if need be change styles and sizing.

• h1, ONE per page. Always need one at top of page
• h2, Use sparingly as the "chapter headings" of the page
• h3, Use as many as you want for subheadings under h2, most commonly used for components where there may be alot on the page
• h4, Used for subheadings under h3, must be nested under an h3
• h5, Used for subheadings under h4, must be nested under an h4
• h6, Should rarely be used. , Used for subheadings under h5, must be nested under an h5

Only 1 H1 per page, so when laying out a page keep this in mind.

• Components that use an H1 and should only have one on the page (exception being the billboard which you can set the heading)



-Billboards

-Paragraph

-Interior Hero

Some classes you can use to style your content. Any of the colors will make the font that color.
class=“red blue black green yellow”

Alignment Classes will align the font within that div.
class=“left center right”

Other basic classes include:
class=“display-none underline no-disc text-underline hide-mobile hide-desktop marg-50 inline img image inline-block”

Some bootstrap classes that will come in handy, (*note that bootstrap class should be placed on divs to work correctly and places within a row div, see example below for structure).

• .col- (extra small/mobile devices - screen width less than 576px)
• .col-sm- (small devices/ipad/mobile - screen width equal to or greater than 576px)
• .col-md- (medium devices/ipad/some desktop - screen width equal to or greater than 768px)
• .col-lg- (large devices/desktop - screen width equal to or greater than 992px)
• .col-sm-12 {width: 100%;}
• .col-sm-11 {width: 91.66666667%;}
• .col-sm-10 {width: 83.33333333%;}
• .col-sm-9 {width: 75%;}
• .col-sm-8 {width: 66.66666667%;}
• .col-sm-7 {width: 58.33333333%;}
• .col-sm-6 {width: 50%;}
• .col-sm-5 {width: 41.66666667%;}
• .col-sm-4 {width: 33.33333333%;}
• .col-sm-3 {width: 25%;}
• .col-sm-2 {width: 16.66666667%;}
• .col-sm-1 {width: 8.33333333%;}
• See complete list of bootstrap classes here

Special Class I Made
.col-lg-20 {width: 20%;}

Everything you want in a row should be contained in a row div. Should equal 12 or 100%.
Example:
<div class="row"> <div class="col-sm-8 col-xs-12"> Left Content </div> <div class="col-sm-4 col-xs-12"> Right Content </div> </div>

Code sample to understand structure:

<div class="sample-outer-div"> <h1>Page Header</h1> <p class="lead">Some texty text about some shenanigans</p> <h2 class="center">Chapter Heading</h2> <div class="row"> <div class="col-sm-6 col-xs-6"><!—50% Width—> <h3>Mini Section Heading, Component Header</h3> <img src="/assets/toolkit/images/recipe-pie.jpg" alt="Giant Eagle Pecan Pie with blue background" class="img image"> <p>This is a sentence and we only want <span class="red">this</span> word red.</p> <a href="#" alt="Giant Eagle Link">Link Text</a> </div> <div class="col-sm-6 col-xs-6"><!—50% Width—> <h3>Mini Section Heading, Component Header</h3> <img src="/assets/toolkit/images/recipe-pie.jpg" alt="Giant Eagle Pecan Pie with blue background" class="img image"> <p>This is a sentence and we only want <span class="red">this</span> word red. <h4>This is an H4</h4> <h5>This is an H5</h5> <h6>This is an H6</h6> </p> <a href="#" alt="Giant Eagle Link">Link Text</a> </div> </div> <!— Ends Row—> </div><!-— Ends Outer Div —>

Output:

Relative vs exact Links vs vanity vs alias

Relative: (Only to be used within the same site, please always use this navigating around our site.)
Example:
Starting URL: /save
Goes to URL: https://www.gianteagle.com/save

Exact: (Exact URL, typically used if linking to external site. do not use these internally)
Example:
Starting URL: https://www.gianteagle.com/save
Goes to URL: https://www.gianteagle.com/save

Vanity/Alias: (Different URL than actual url, sort of a customer trick)
Example:
Starting URL: https://www.gianteagle.com/weekly-meal-plan
Goes to URL: https://www.gianteagle.com/recipes

Redirect: (Redirecting from our site to another site to make it look
they are on our site)
Example:
Starting URL: www.GiantEagle.com/Dario
Goes to URL: http://intro.mydario.com/gianteagle.php