@extends('templates._with_sidebar') @section('html.head.title', "Style Guide" . ' -') @section('beforeMain') @include('sections.banner', ['background' => '', 'space_class'=>'xlg-pt4 pt3 pb3']) @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.
@include('atoms.styles.headings')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. To create a checklist block simply select the main title for that checklist block and select "Checklist Heading" in the "styles" dropdown menu
Each checklist must start with a checklist heading. Any other headings used must be H5 or H6 accordingly. Each section should also contain a minimum of at least one small paragraph.
@foreach($variable as $key => $value) @include('atoms.checklist' , $value) @endforeachEach item is designed to be collapsible. To create a collapsable block simply select the main title for that collapsable block and select "Collapsable Heading" in the "styles" dropdown menu
Each collapsible section must start with a collapsable heading. Any other headings used must be H5 or H6 accordingly. Each section should also contain a minimum of at least one small paragraph.
@foreach($variable as $key => $value) @include('atoms.resource_link_collapsible' , $value) @endforeachUse this style to indicate to a user that this is an example of a fillable input.
Non est adipisci dolor autem. Quia architecto tempore facere laborum eius natus provident. Laboriosam ab porro an example ipsam omnis sed earum. Iusto provident possimus doloribus sed tempora corporis vitae. Laboriosam ab porro dolor autem. Non est adipisci ipsam omnis sed earum. Iusto provident possimus corporis vitae. Quia architecto tempore facere laborum eius natus provident.
Use the Ckeditor image styles to adjust your images to different sizes. Use the ckeditor's image alignment options to align the image left, right or in the centre.
Non est adipisci dolor autem. Quia architecto tempore facere laborum eius natus provident. Laboriosam ab porro ipsam omnis sed earum. Iusto provident possimus doloribus sed tempora corporis vitae. Laboriosam ab porro dolor autem. Non est adipisci ipsam omnis sed earum. Iusto provident possimus corporis vitae. Quia architecto tempore facere laborum eius natus provident.
Non est adipisci dolor autem. Quia architecto tempore facere laborum eius natus provident. Laboriosam ab porro ipsam omnis sed earum. Iusto provident possimus doloribus sed tempora corporis vitae. Laboriosam ab porro dolor autem. Non est adipisci ipsam omnis sed earum. Iusto provident possimus corporis vitae. Quia architecto tempore facere laborum eius natus provident. Iusto provident possimus corporis vitae. Quia architecto tempore facere laborum eius natus provident.
Non est adipisci dolor autem. Quia architecto tempore facere laborum eius natus provident. Laboriosam ab porro ipsam omnis sed earum. Iusto provident possimus doloribus sed tempora corporis vitae. Laboriosam ab porro dolor autem. Non est adipisci ipsam omnis sed earum. Iusto provident possimus corporis vitae. Quia architecto tempore facere laborum eius natus provident. Iusto provident possimus corporis vitae. Quia architecto tempore facere laborum eius natus provident.
Non est adipisci dolor autem. Quia architecto tempore facere laborum eius natus provident. Laboriosam ab porro ipsam omnis sed earum. Iusto provident possimus doloribus sed tempora corporis vitae. Laboriosam ab porro dolor autem. Non est adipisci ipsam omnis sed earum. Iusto provident possimus corporis vitae. Quia architecto tempore facere laborum eius natus provident. Iusto provident possimus corporis vitae. Quia architecto tempore facere laborum eius natus provident.