@extends('templates._with_sidebar') @section('html.head.title', "Style Guide" . ' -') @section('beforeMain') @include('sections.banner', ['background' => '', 'space_class'=>'pt4 pb3']) {{-- @if(!empty($item->getBreadcrumbs())) @include('atoms.breadcrumbs', ['breadcrumbs' => $item->getBreadcrumbs()]) @endif --}} @include('atoms.heading_group', [ 'title' => "Style Guide", 'copy' => 'This page contains an overview of styles and examples for use when writing content for this website.' ]) @include('sections.banner_CLOSE') @endsection @section('main')

Colours

Primary: #1f1634
Primary: #352148
Primary: #54467E
Assent 1: #ffb63b
Assent 2: #0090FF
#4e4e4e
#777777
#E5E5E5

Headings

Headings are used to create sections on a page. The diferent sizes help to create a hierarchy and break up content making it easier to scan and digest. Use heading H2 and smaller to sub-divide content.



@include('atoms.heading_group', [ 'title' => 'This is a page header', 'copy' => 'This is some text that helps to give the title context.', 'title_link' => '#'])
@include('atoms.styles.headings')

Fonts

Fonts used on this website are shown below. Please only use these fonts.

@include('atoms.styles.fonts')

Paragraphs and content styles

This section shows the styles available and offers suggestions on how to use them.

Feel free to use bold and italic, but NEVER use underline. Underlines can be confusing to users since they usually indicate a link.

Paragraphs should be kept relatively short so that content is easy to scan. Users will often scan the first sentence of each paragraph and read the paragraph further if the first sentence catches their attention.


Blockquotes

Styled quotes can break up content visually and contextually. Use blockquotes to quote people or highlight and bring out various parts of a document. They can also help to add a bit of variation to a very text based document.

@include('atoms.styles.blockquote')

Lists

Lists are a really effective way to display collections of items in a way which is easy to scan, read, digest and break up the page visually.

Numbered lists can be used where the items have a certain sequence, for example when you are describing certain steps that must be completed in order.

Bullets

@include('atoms.styles.bullet_list')

Numbered

@include('atoms.styles.numbered_list')

Forms

Inputs

@include('atoms.styles.forms')

Select

@include('atoms.styles.select')

Toggle switch

@include('atoms.styles.toggle_switch')

Checkbox

@include('atoms.styles.checkbox')

Radio buttons

@include('atoms.styles.radio')

Buttons

@include('atoms.styles.buttons')

Tables

The table will auto size when resizing your browser and each column will adjust itself automatically according the content placed inside it.

Be aware that tables with too many columns will not look good on mobile devices. As a rule of thumb, a maximum of 4 columns works well.

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99

Checklist style

The checklist page contains a list of items to be completed or points to be considered. As users complete a task they can check off that task helping them to identity which items have completed and which items haven't.

Each checklist must contain a top heading of H4. Any other headings used must be H5 or H6 accordingly. Each checklist must also contain a minimum of at least one small paragraph.

@include('atoms.checklist') @include('atoms.checklist') @include('atoms.checklist')

Guidance note and FAQ page Styles

Each item is designed to be collapsible. When the page first loads the user is able to quickly scan through each heading. Once the user has found the section they are looking for they can expand that section by clicking on it.

Each collapsible section must contain a top heading of H4. Any other headings used must be H5 or H6 accordingly. Each section must also contain a minimum of at least one small paragraph.

@foreach($variable as $key => $value) @include('atoms.resource_link_collapsible' , $value) @endforeach @endsection @section('sidebar') @endsection @section('afterMain') @endsection