OffHealth component library

Section 

<section class="section py-6 md:py-8 lg:py-10 xl:py-20">
    <div class="container">

        <header class="max-w-3xl mx-auto sm:text-center">
            <h2 class="text-2xl sm:text-3xl lg:text-4xl leading-9 font-bold mb-3">Key features</h2>
            <p class="text-lg text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta optio placeat quisquam minus rem omnis, aliquam consequatur at deleniti, laudantium fugiat ratione? Minima voluptatem, aliquam quod dolorem necessitatibus, blanditiis, itaque deleniti.</p>
        </header>

        <div class="mt-6 md:mt-8 lg:mt-10">
            <div class="space-y-8 sm:space-y-0 sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-8 md:gap-10 lg:gap-12">
                <div class="feature">
                    <svg class="inline-block align-middle fill-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#globe" />
                    </svg>

                    <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Competitive</h4>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quisquam suscipit culpa sit vero eius voluptate? Repellendus fugit beatae eveniet!</p>
                </div>
                <div class="feature">
                    <svg class="inline-block align-middle fill-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#key" />
                    </svg>

                    <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Accessible</h4>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus reprehenderit fuga. Eligendi provident ipsa dolor, consequatur soluta obcaecati? Error!</p>
                </div>
                <div class="feature">
                    <svg class="inline-block align-middle fill-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#user" />
                    </svg>

                    <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Personnal</h4>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita sequi cumque odio perspiciatis soluta iste voluptatem eveniet magni assumenda distinctio.</p>
                </div>
                <div class="feature">
                    <svg class="inline-block align-middle fill-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#gift" />
                    </svg>

                    <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Approachable</h4>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quisquam suscipit culpa sit vero eius voluptate? Repellendus fugit beatae eveniet!</p>
                </div>
                <div class="feature">
                    <svg class="inline-block align-middle fill-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#bulb" />
                    </svg>

                    <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Original</h4>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus reprehenderit fuga. Eligendi provident ipsa dolor, consequatur soluta obcaecati? Error!</p>
                </div>
                <div class="feature">
                    <svg class="inline-block align-middle fill-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#lightning" />
                    </svg>

                    <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Fast</h4>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita sequi cumque odio perspiciatis soluta iste voluptatem eveniet magni assumenda distinctio.</p>
                </div>
            </div>

        </div>

        <div class="mt-6 md:mt-8 lg:mt-10 sm:text-center">

            <button type="button" class="n7-btn 
    n7-btn--primary
    n7-btn--primary">
                Take the tour

            </button>

        </div>

    </div>
</section>
 
{% extends "@section-wrapper" %}

{% block content %}
    <header class="max-w-3xl mx-auto sm:text-center">
        <h2 class="text-2xl sm:text-3xl lg:text-4xl leading-9 font-bold mb-3">{{ title }}</h2>
        <p class="text-lg text-gray-600">{{ body }}</p>
    </header>

    {% if component %}
        <div class="mt-6 md:mt-8 lg:mt-10">
            {% render '@' + component.handle, component.context, true %}
        </div>
    {% endif %}

    {% if button %}
        <div class="mt-6 md:mt-8 lg:mt-10 sm:text-center">
            {% render '@button', button, true %}
        </div>
    {% endif %}
{% endblock %}
 
{
  "title": "Key features",
  "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta optio placeat quisquam minus rem omnis, aliquam consequatur at deleniti, laudantium fugiat ratione? Minima voluptatem, aliquam quod dolorem necessitatibus, blanditiis, itaque deleniti."
}

No notes defined.