OffHealth component library

Hero 

<div class="n7-hero grid relative bg-cover bg-[center_top] bg-no-repeat min-h-[25rem] h-full md:min-h-[33rem] lg:h-[85vh] md:max-h-[66rem] lg:max-h-[45rem]" style="background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 43.16%, rgba(255, 255, 255, 0) 70.17%), url(/images/bkg-hero-iontoretina.jpg);">
    <!-- RP 240411 Hero - Changed classes -->
    <div class="container grid items-center">
        <div class="grid md:grid-cols-2 items-center justify-items-center">

            <!-- RP 240411 Hero - Added container div -->
            <div class="grid items-center justify-items-center">
                <img src="../../images/img-hero-iontoretina.png" alt="" loading="lazy" class="image w-full sm:max-w-[454px] h-64 sm:h-auto object-cover" />

            </div>

            <div class="order-first py-6 sm:py-10 md:py-12 lg:py-20 xl:py-24">
                <!-- RP 240411 Hero - Changed classes -->
                <div class="sm:container md:max-w-2xl md:px-6 lg:pl-12">
                    <h1 class="n7-heading-3 xl:n7-heading-1 !font-bold">
                        IONTORETINA
                    </h1>

                    <p class=" n7-body-lg mt-3 xl:text-3xl md:mt-5 md:max-w-3xl text-teal-500">
                        Un nuovo trattamento per le <strong>maculopatie</strong> e la <strong>degenerazione maculare legata all'età</strong>
                    </p>

                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="n7-hero grid relative bg-cover bg-[center_top] bg-no-repeat min-h-[25rem] h-full md:min-h-[33rem] lg:h-[85vh] md:max-h-[66rem] lg:max-h-[45rem]"{% if hasBkg %} style="background-image: {{bkgOverlay}}, url({{bkgImage}});"{% endif %}>
<!-- RP 240411 Hero - Changed classes -->
    <div class="container grid items-center">
        <div class="grid md:grid-cols-2 items-center justify-items-center">
            {% if component %}
<!-- RP 240411 Hero - Added container div -->
            <div class="grid items-center justify-items-center">
                {% render '@' + component.handle, component.context|default({}), true %}
            </div>
            {% endif %}

            <div class="{% if reverseOrder %}order-first{% endif %} py-6 sm:py-10 md:py-12 lg:py-20 xl:py-24">
<!-- RP 240411 Hero - Changed classes -->
                <div class="sm:container md:max-w-2xl md:px-6 lg:pl-12">
                    <h1 class="{% if titleClass %}{{ titleClass }}{% endif %}">
                        {{ title | safe }}
                    </h1>
                    {% if body %}
                        <p class="{% if bodyClass %} {{ bodyClass }}{% endif %}">
                            {{ body | safe }}
                        </p>
                    {% endif %}
                    {% if buttons %}
                        <div class="mt-6 flex flex-wrap gap-y-4 gap-x-6">
                            {% if buttons.primary %}
                                <div class="flex-1 whitespace-nowrap">
                                    {% render '@button', buttons.primary, true %}
                                </div>
                            {% endif %}
                            {% if buttons.secondary %}
                                <div class="flex-1 whitespace-nowrap">
                                    {% render '@button--secondary', buttons.secondary, true %}
                                </div>
                            {% endif %}
                            {% if buttons.outline %}
                                <div class="flex-1 whitespace-nowrap">
                                    {% render '@button--outline', buttons.outline, true %}
                                </div>
                            {% endif %}
                            {% if buttons.text %}
                                <div class="flex-1 whitespace-nowrap">
                                    {% render '@button--text', buttons.text, true %}
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "mainHidden": true,
  "hasBkg": true,
  "bkgImage": "/images/bkg-hero-iontoretina.jpg",
  "bkgOverlay": "linear-gradient(90deg, rgba(255, 255, 255, 0.8) 43.16%, rgba(255, 255, 255, 0) 70.17%)",
  "reverseOrder": true,
  "title": "IONTORETINA",
  "titleClass": "n7-heading-3 xl:n7-heading-1 !font-bold",
  "body": "Un nuovo trattamento per le <strong>maculopatie</strong> e la <strong>degenerazione maculare legata all'età</strong>",
  "bodyClass": "n7-body-lg mt-3 xl:text-3xl md:mt-5 md:max-w-3xl text-teal-500",
  "component": {
    "handle": "image",
    "context": {
      "src": "/images/img-hero-iontoretina.png",
      "class": "w-full sm:max-w-[454px] h-64 sm:h-auto object-cover"
    }
  }
}

No notes defined.