@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')
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.
Fonts used on this website are shown below. Please only use these fonts.
@include('atoms.styles.fonts')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.
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 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.
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 |
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')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