Global Elements

Header & Footer

The header includes: Promo messages; Stores/My Account drop down; Expanding search; Bag drop down, Navigation & Megamenu; Fixed nav on scroll; Breadcrumb trail. The fixed nav shows the burger menu on screen sizes up to 1260px wide.

The main footer is fixed to the bottom of the viewport - as demonstrated on the following page. There are also 3 content blocks, not fixed, that appear at the bottom of every page

View header & footer in new window

Header Mobile

Mobile header includes: Promo messages reduced to 1; Off Canvas navigation; Off Canvas bag; Fixed header on scroll; Search; Breadcrumb trail

The main footer is not fixed on mobile. The 3 content blocks are reduced to 1 on mobile.

View Mobile header & footer in new window

Buttons / CTAs

Button styles, standard anchor styles & CTA text links

Buttons

Standard button, width fits to textStandard Button

Expanded button, width fits to parent divExpanded Button

Button expands to 100% on mobile, used when columns are stacked on mobileMobile Expanded Button

SmallSmall Button

TinyTiny Button

Coloured ButtonButton

Disabled ButtonButton

Outline ButtonButton

Standard anchor link style

Standard Link style (black, with grey on hover desktop)

Text CTAs

Standard Underline (.under)

Styled Underline (.underline)

Compact Styled Underline (.underline.compact)

Brown Thomas Style Guide