{% extends '@SyliusShop/layout.html.twig' %}

{% block bodyClass %}styleguide{% endblock %}

{% set tab='&nbsp;&nbsp;&nbsp;&nbsp;' %}

{% block content %}
    <div class="container">
        {# BANNER #}
        <section class="block-banner dark">
            <div class="img-wrapper">
                <img src="http://via.placeholder.com/1110x470" alt="" class="img-fluid">
            </div>
            <div class="text-wrapper">
                {% include '@SyliusShop/Icons/pattern.html.twig' %}
                <h1 class="title-wrapper display-1">Exemple de titre H1</h1>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
                <a href="" class="btn btn-dark">Button dark</a>
            </div>
        </section>
        <pre><code>{&#37; include '@DediSyliusTheme/Blocks/_block-banner.html.twig' &#37;}

            &lt;section class="block-banner <b>dark/light</b>">
                {{ (tab)|raw }}&lt;div class="img-wrapper">
                    {{ (tab ~ tab)|raw }}&lt;img src="" alt="" class="img-fluid">
                {{ (tab)|raw }}&lt;/div>
                {{ (tab)|raw }}&lt;div class="text-wrapper">
                    {{ (tab ~ tab)|raw }}{&#37; include '@SyliusShop/Icons/pattern.html.twig' &#37;}
                    {{ (tab ~ tab)|raw }}&lt;h1 class="title-wrapper display-1">...&lt;/h1>
                    {{ (tab ~ tab)|raw }}&lt;p>...&lt;/p>
                    {{ (tab ~ tab)|raw }}&lt;a href="" class="btn btn-dark">...&lt;/a>
                {{ (tab)|raw }}&lt;/div>
            &lt;/section></code></pre>

        <hr>

        {# BANNERS x 2 #}
        <section class="block-banner-row">
            <div class="row">
                <div class="col-md-6">
                    <section class="block-banner dark">
                        <div class="img-wrapper">
                            <img src="http://via.placeholder.com/540x450" alt="" class="img-fluid">
                        </div>
                        <div class="text-wrapper">
                            <h1 class="title-wrapper display-2">Exemple de titre H1</h1>
                            <p>Lorem ipsum dolor sit amet, consetetur</p>
                            <a href="" class="btn btn-dark">Button dark</a>
                        </div>
                    </section>
                </div>
                <div class="col-md-6">
                    <section class="block-banner light">
                        <div class="img-wrapper">
                            <img src="http://via.placeholder.com/540x450" alt="" class="img-fluid">
                        </div>
                        <div class="text-wrapper">
                            <h1 class="title-wrapper display-2">Exemple de titre H1</h1>
                            <p>Lorem ipsum dolor sit amet, consetetur</p>
                            <a href="" class="btn btn-dark">Button dark</a>
                        </div>
                    </section>
                </div>
            </div>
        </section>
        <pre><code>{&#37; include '@DediSyliusTheme/Blocks/_block-banners.html.twig' &#37;}

            &lt;section class="block-banner-row">
                {{ (tab)|raw }}&lt;div class="row">
                    {{ (tab ~ tab)|raw }}&lt;div class="col-md-6">
                        {{ (tab ~ tab ~ tab)|raw }}&lt;section class="block-banner <b>dark/light</b>">
                            {{ (tab ~ tab ~ tab)|raw }}&lt;div class="img-wrapper">
                                {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;img src="" alt="" class="img-fluid">
                            {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                            {{ (tab ~ tab ~ tab)|raw }}&lt;div class="text-wrapper">
                                {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;h1 class="title-wrapper display-2">...&lt;/h1>
                                {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;p>...&lt;/p>
                                {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;a href="" class="btn btn-dark">...&lt;/a>
                            {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                        {{ (tab ~ tab ~ tab)|raw }}&lt;/section>
                    {{ (tab ~ tab)|raw }}&lt;/div>
                    {{ (tab ~ tab)|raw }}&lt;div class="col-md-6">
                        {{ (tab ~ tab ~ tab)|raw }}&lt;section class="block-banner <b>dark/light</b>">
                            {{ (tab ~ tab ~ tab)|raw }}&lt;div class="img-wrapper">
                                {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;img src="" alt="" class="img-fluid">
                            {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                            {{ (tab ~ tab ~ tab)|raw }}&lt;div class="text-wrapper">
                                {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;h1 class="title-wrapper display-2">...&lt;/h1>
                                {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;p>...&lt;/p>
                                {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;a href="" class="btn btn-dark">...&lt;/a>
                            {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                        {{ (tab ~ tab ~ tab)|raw }}&lt;/section>
                    {{ (tab ~ tab)|raw }}&lt;/div>
                {{ (tab)|raw }}&lt;/div>
            &lt;/section></code></pre>

        <hr>

        {# IMAGE + TEXT #}
        <section class="block-img-text left">
            <div class="row">
                <div class="col-md-6">
                    <div class="img-wrapper">
                        <img src="http://via.placeholder.com/540x335" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="text-wrapper">
                        <h2 class="title-wrapper h2">Exemple de titre lorem ipsum</h2>
                        <h3 class="subtitle-wrapper h3">Exemple de sous-titre</h3>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
                        <a href="" class="btn btn-outline-primary">Je découvre</a>
                    </div>
                </div>
            </div>
        </section>
        <section class="block-img-text right">
            <div class="row">
                <div class="col-md-6">
                    <div class="img-wrapper">
                        <img src="http://via.placeholder.com/540x335" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="text-wrapper">
                        <h2 class="title-wrapper h2">Exemple de titre</h2>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                        <a href="" class="btn btn-outline-primary">Je découvre</a>
                    </div>
                </div>
            </div>
        </section>
        <pre><code>{&#37; include '@DediSyliusTheme/Blocks/_block-img-text.html.twig' &#37;}

            &lt;section class="block-img-text <b>left/right</b>">
                {{ (tab)|raw }}&lt;div class="row">
                    {{ (tab ~ tab)|raw }}&lt;div class="col-md-6">
                        {{ (tab ~ tab ~ tab)|raw }}&lt;div class="img-wrapper">
                            {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;img src="" alt="" class="img-fluid">
                        {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                    {{ (tab ~ tab)|raw }}&lt;/div>
                    {{ (tab ~ tab)|raw }}&lt;div class="col-md-6">
                        {{ (tab ~ tab ~ tab)|raw }}&lt;div class="text-wrapper">
                            {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;h2 class="title-wrapper h2">Exemple de titre lorem ipsum&lt;/h2>
                            {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;h3 class="subtitle-wrapper h3">Exemple de sous-titre&lt;/h3>
                            {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est&lt;/p>
                            {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;a href="" class="btn btn-outline-primary">...&lt;/a>
                        {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                    {{ (tab ~ tab)|raw }}&lt;/div>
                {{ (tab)|raw }}&lt;/div>
            &lt;/section>
            &lt;section class="block-img-text <b>left/right</b>">
                    {{ (tab)|raw }}...
            &lt;/section></code></pre>

        <hr>

        {# TEXT #}
        <section class="block-text">
            <div class="text-wrapper">
                <h2 class="title-wrapper h2">Exemple de titre</h2>
                <h3 class="subtitle-wrapper display-4">Exemple de sous-titre</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit</p>
                <a href="" class="btn btn-outline-primary">Je découvre</a>
            </div>
        </section>
        <pre><code>{&#37; include '@DediSyliusTheme/Blocks/_block-text.html.twig' &#37;}

            &lt;div class="block-text">
                {{ (tab)|raw }}&lt;div class="text-wrapper">
                    {{ (tab ~ tab)|raw }}&lt;h2 class="title-wrapper h2">...&lt;/h2>
                    {{ (tab ~ tab)|raw }}&lt;h3 class="subtitle-wrapper display-4">...&lt;/h3>
                    {{ (tab ~ tab)|raw }}&lt;p>...&lt;/p>
                    {{ (tab ~ tab)|raw }}&lt;a href="" class="btn btn-outline-primary">...&lt;/a>
                {{ (tab)|raw }}&lt;/div>
            &lt;/div></code></pre>
    </div>
{% endblock %}
