@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')
    <h2>Headings</h2>
    <p>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.</p>

    @include('atoms.styles.headings')

    <hr class="my4" />

    <h2>Paragraphs and content styles</h2>
	<p>This section shows the styles available and offers suggestions on how to use them.</p>
	<p>Feel free to use <strong>bold</strong>&nbsp;and <em>italic</em>, but NEVER use <u>underline</u>. Underlines&nbsp;can be confusing to users since they usually indicate a <a href="#!">link</a>.</p>
	<p>Paragraphs should be kept relatively short so that content is easy to scan. Users will often scan the first sentence&nbsp;of each paragraph and read the paragraph further if the first sentence catches their attention.</p>

    <hr class="my4" />

    <h2>Blockquotes</h2>
    <p class="mb3">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.</p>
    @include('atoms.styles.blockquote')

    <hr class="my4" />

    <h2>Lists</h2>
    <p>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.</p>

    <p>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.</p>
    <h4>Bullets</h4>
    @include('atoms.styles.bullet_list')
    <h4>Numbered</h4>
    @include('atoms.styles.numbered_list')

    <hr class="my4" />

    <h2>Tables</h2>
    <p>The table will auto size when resizing your browser and each column will adjust itself automatically according the content placed inside it.</p>

    <p>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.</p>

    <table>
        <thead>
            <tr>
                <th data-field="id">Name</th>
                <th data-field="name">Item Name</th>
                <th data-field="price">Item Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alvin</td>
                <td>Eclair</td>
                <td>$0.87</td>
            </tr>
            <tr>
                <td>Alan</td>
                <td>Jellybean</td>
                <td>$3.76</td>
            </tr>
            <tr>
                <td>Jonathan</td>
                <td>Lollipop</td>
                <td>$7.00</td>
            </tr>
            <tr>
                <td>Shannon</td>
                <td>KitKat</td>
                <td>$9.99</td>
            </tr>
        </tbody>
    </table>

    <hr class="my4" />

    <h2>Checklist style</h2>
    <p>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</p>

    <p class="mb3">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.</p>

        @foreach($variable as $key => $value)
         @include('atoms.checklist' , $value)
    @endforeach

    <hr class="my4" />



    <h2>Guidance note and FAQ page Styles</h2>
    <p>Each 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</p>

    <p class="mb3">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.</p>

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


    <hr class="my4" />

    <h2>Form input underline</h2>
    <p class="mb3">Use this style to indicate to a user that this is an example of a fillable input.</p>
    <h4>Example title</h4>
    <p>Non est adipisci dolor autem. Quia architecto tempore facere laborum eius natus provident. Laboriosam ab porro <span class="ckeditor__form-underline">an example</span> 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.</p>


    <hr class="my4" />

    <h2>Image alignment</h2>
    <p class="mb3">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.</p>
    <img src="http://placehold.it/800x400" alt="" />
    <p>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.</p>
    <img src="http://placehold.it/800x600" class="ckeditor__img-col-6" style="float:left" />
    <p>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.</p>
    <img src="http://placehold.it/800x600" class="ckeditor__img-col-4" style="float:right" />
    <p>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.</p>
    <img src="http://placehold.it/800x800" class="ckeditor__img-col-3" style="float:left" />
    <p>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.</p>
    <br />
    <img src="http://placehold.it/800x400" class="ckeditor__img-col-6" />


@endsection



@section('sidebar')

@endsection



@section('afterMain')

@endsection