TEST The Hays General Content Sidebar Structure

 

TEST The Hays General Content Sidebar Structure1 TEST TEST TEST TEST TEST TEST

Title should be “normal” from style dropdown, uppercase. Bold the keywords​ Sidebar title: Sticky sidebar heading here​ Sidebar description:1

  • Sidebar copy here​
  • Sidebar CTA Button Label: CTA copy here​
  • Sidebar CTA Button Link: url to icon here​
  • Click plus/minus small circles to add/delete ​ more CTA links

Solid colour

Solid colour backgrounds can be used on any page to help seperate content sections. White, Dark Blue and Parchment are the only colours that pass AA level accessibility. 


 

 

 

Arrows

Backgrounds with between three and five arrows can be used on most sections to delimit the content. They can appear on either side  of the bottom or top right side of the block. (Please note - the outer border is just for illustrative purpose for this document.) One of the arrows need to be Dark Blue. In the mobile version, do not use more than 3 arrows per section.

Desktop                                                                                                                          Mobile

 

 

Slices

The large background colour slice is only used with spotlight components but could be used for future new components for an additional and modern way to help break up sections. As this background is created out of the triangle layout, it should always preserve the angle.

Desktop                                                                                                                          Mobile

 

Boxes

Each box should have rounded corners with a radius of 4 px. 

The boxes could appear on a white background, with a Secondary grey border of 2 px, or a Dark Blue background, with a White border of 2px; or in a Parchment background, with a white fill.

The composition of layout will depend on the elements to display, should be between 2 and 4 in a row.

Desktop                                                                                                                                   Mobile
 

TEST The Hays General Content Sidebar Structure

 

TEST The Hays General Content Sidebar Structure2

Title should be “normal” from style dropdown, uppercase. Bold the keywords​ Sidebar title: Sticky sidebar heading here​ Sidebar description:2

  • Sidebar copy here​
  • Sidebar CTA Button Label: CTA copy here​
  • Sidebar CTA Button Link: url to icon here​
  • Click plus/minus small circles to add/delete ​ more CTA links

TEST The Hays General Content Sidebar Structure

 

TEST The Hays General Content Sidebar Structure3

Title should be “normal” from style dropdown, uppercase. Bold the keywords​ Sidebar title: Sticky sidebar heading here​ Sidebar description:3

  • Sidebar copy here​
  • Sidebar CTA Button Label: CTA copy here​
  • Sidebar CTA Button Link: url to icon here​
  • Click plus/minus small circles to add/delete ​ more CTA links

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test

Test