Primary Banner
Text for banner headers - "body copy" style, white text on dark banner. Padding changes on the whole banner element via padding added to the Column. This banner at the top of a web page can have the dark blue background plain colour, or can be an image applicable to the page title.
Secondary Banner
Text for header banners- "body copy" style, primary colour (darkest blue) on light banners. This goes on the top of pages that are subordinate to the top-level page. Any pages whose names are on the top of the Navbar get the Primary Banner on their header. Pages that are in the navbar menu pulldowns will have the secondary banner.
The below 3 boxes are used in this arrangement on several pages, especially the home page. Note the differences for responsive, any time you use this 3-box arrangement make sure to also use the correct responsive sizes and spacing. The main responsive changes are on the parent container - in this example, all of these boxes are inside a parent column element. The "Advanced" format for the column has margin of 1em for tablet size, and margin of 0.2em for mobile.
Main Section Headers
Paragraph text. Can be centered, left-justified, whatever works with the content. Default text style "body text" Text colour default the grey "text" in colour palette, can be changed based on background colour for best accessibility.
Cardname 1
The "Cardname" header is for subsections such as columns and dominant text such as large list or bullets. It should be our H4 style.
Cardname 2
Gilbert Hughes joined Hub Constructon in 1955 as an estimator/project manager, after previously working months as a laborer.
Cardname 3
Gilbert Hughes joined Hub Constructon in 1955 as an estimator/project manager, after previously working months as a laborer.
Buttons
2 buttons, identical other than hover colours. First for use on light-coloured background, second for use on dark-coloured background.
Liquid Button element for use on light-coloured background. Background button colour Cadet Blue (secondary colour in global palette)
Button text H5, 0.9 rem, colour white. Border radius of 1em. text padding 0.8em top/bottom, 2 em sides. Note: button text as words with capitalized first letters on each word. Hover effect Background colour light blue, text Prussian Blue (primary colour in global palette).
NOTE: designer prerogative to change hover colour based on background colour. Use hover red sparingly.
Button for use on dark-coloured background. Background button colour Light Blue ("accent 2" colour in global palette)
Button text H5, colour Prussian blue (primary colour in global palette Border radius of 1em. Hover effect Background colour Prussian Blue (primary colour in global palette, Text light blue.
NOTE: designer prerogative to change hover colour based on background colour. Use hover red sparingly.
screen-width single navigation container with button "simple call to action"
Full width cadet blue/prussian blue gradient rectangular section with a button on it. border radius 1em. Included in the section is white text and an embedded button. This can't be put on top of a dark background. The default big container has a gradient on it but you can change the position and even proportion of where the gradient changes each time you use it.