@extends('master')

@section('content')
    <div class="l-contain">

        <div class="o-block">
            <div class="u-owl">
                <h1>This is heading 1</h1>
                <h2>This is heading 2</h2>
                <h3>This is heading 3</h3>
                <h4>This is heading 4</h4>
                <h5>This is heading 5</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium commodi
                    doloremque
                    fugiat, id nulla sapiente vel. Ab accusamus adipisci architecto consectetur culpa debitis dolor
                    dolorum
                    est eum explicabo laborum libero natus non praesentium quaerat quam reiciendis rem sapiente sunt
                    tempora
                    temporibus totam vitae, voluptatum. Consequatur consequuntur cumque deserunt repellat.
                </p>
                <ul>
                    <li>Kolimus hic ipsum iure molestias necessitatibus sequi sint tempora?</li>
                    <li>Otque, sit, soluta! Blanditiis eveniet laborum maxime nihil saepe tempore.</li>
                    <li>Morporis dolorem eum itaque necessitatibus neque obcaecati omnis.</li>
                    <li>Menim fugiat minus nostrum quam quis ullam, veritatis!</li>
                    <li>Abore mollitia recusandae sapiente sed. Explicabo, hic.</li>
                </ul>
                <ul class="s-checklist">
                    <li>Kolimus hic ipsum iure molestias necessitatibus sequi sint tempora?</li>
                    <li>Otque, sit, soluta! Blanditiis eveniet laborum maxime nihil saepe tempore.</li>
                    <li>Morporis dolorem eum itaque necessitatibus neque obcaecati omnis.</li>
                    <li>Menim fugiat minus nostrum quam quis ullam, veritatis!</li>
                    <li>Abore mollitia recusandae sapiente sed. Explicabo, hic.</li>
                </ul>

                <div class="checklist-has-x-small-font">
                    <ul class="s-checklist">
                        <li>Kolimus hic ipsum iure molestias necessitatibus sequi sint tempora?</li>
                        <li>Otque, sit, soluta! Blanditiis eveniet laborum maxime nihil saepe tempore.</li>
                        <li>Morporis dolorem eum itaque necessitatibus neque obcaecati omnis.</li>
                        <li>Menim fugiat minus nostrum quam quis ullam, veritatis!</li>
                        <li>Abore mollitia recusandae sapiente sed. Explicabo, hic.</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="o-block">
            @include('components.servicepoint')
        </div>

        <div class="o-block">
            @include('components.button')
            @include('components.button', ['modifiers' => ['icon']])
        </div>

        <div class="o-block">
            @include('components.button', ['isButton' => true])
            @include('components.button', ['isButton' => true, 'modifiers' => ['icon']])
        </div>

        <div class="o-block">
            @include('components.button', ['type' => 'ghost'])
            @include('components.button', ['type' => 'ghost', 'modifiers' => ['icon']])
        </div>

        <div class="o-block">
            @include('components.button', ['type' => 'ghost', 'isButton' => true])
            @include('components.button', ['type' => 'ghost', 'isButton' => true, 'modifiers' => ['icon']])
        </div>

        <div class="o-block">
            @include('components.button', ['type' => 'text'])
            @include('components.button', ['type' => 'text','modifiers' => ['icon']])
        </div>

        <div class="o-block">
            @include('components.button', ['type' => 'text', 'isButton' => true])
            @include('components.button', ['type' => 'text', 'isButton' => true, 'modifiers' => ['icon']])
        </div>

        <div class="o-block  u-bg-primary--700">
            @include('components.button', ['type' => 'text', 'modifiers' => ['on-dark']])
            @include('components.button', ['type' => 'text', 'modifiers' => ['icon', 'on-dark']])
        </div>

    </div>
@endsection