OffHealth component library

Page header component: Minisite 

<!-- RP 240409 Page header minisite - Moved bkg style to external div -->
<div style="background: linear-gradient(180deg, rgba(255, 235, 212, 0.8) -5.28%, rgba(255, 255, 255, 0) 91.17%);">
    <!-- RP 240408 Page header minisite - Changed classes -->
    <!-- RP 240409 Page header minisite - Removed bkg style -->
    <div class="container py-12 lg:py-20 md:px-10 lg:px-16 2xl:px-40 grid gap-6 ">
        <!-- RP 240408 Page header minisite - Changed classes -->
        <div class="grid gap-6 sm:flex sm:justify-between md:gap-x-12 relative">
            <div class="grid auto-rows-min gap-6">

                <span class="n7-category n7-category--sm">

                    <svg class="inline-block align-middle fill-current w-2 h-2 mr-2 transition-all duration-200 ease-out transform group-hover:-translate-x-1 text-primary-400" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#solid--circle" />
                    </svg>

                    category label
                </span>

                <h1 class="n7-heading-4 lg:n7-heading-1 n7-content-01 ">IONTORETINA</h1>

                <h2 class="n7-heading-6 lg:n7-heading-3">Trattamento innovativo per la DMLE</h2>

                <p class="lg:text-lg xl:text-xl n7-content-01">Guarda il video con il <strong>Dott. Marco Lombardo</strong> per scoprire questo trattamento.</p>

                <!-- RP 240408 Page header minisite - Changed classes -->
                <div class="grid gap-6 md:flex md:w-max">

                    <a href="url" class="n7-btn 
    n7-btn--primary
    n7-btn--outline justify-center md:w-fit 2xl:n7-btn--l n7-btn--s">
                        La Iontoforesi sclerale

                        <svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
                            <use xlink:href="../../icons.svg#solid--arrow-right" />
                        </svg>

                    </a>

                    <a href="url" class="n7-btn 
    n7-btn--primary
    justify-center md:w-fit 2xl:n7-btn--l n7-btn--s">
                        Acquista online

                        <svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
                            <use xlink:href="../../icons.svg#outline--cursor-arrow-rays" />
                        </svg>

                    </a>

                </div>

            </div>

            <!-- RP 240408 Page header minisite - Changed classes -->
            <div class="md:grow flex items-start sm:items-center">
                <div class="n7-video relative grow flex justify-end">

                    <iframe class="n7-video__iframe w-full xl:w-[435px] aspect-video rounded-2xl" src="https://www.youtube-nocookie.com/embed/xiBKvzyW_8Y?si=YBS8eqQa32gdwkFL&amp;controls=2&amp;modestbranding=1&amp;rel=0" title="YouTube video title" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                </div>

            </div>

            <div class="absolute -bottom-12 lg:-bottom-20 w-full h-[147px]" style="background: radial-gradient(57.95% 15.85% at 50% 106.42%, rgba(204, 196, 181, 0.65) 0%, rgba(204, 196, 181, 0) 100%);"></div>

        </div>
    </div>
</div>
 
<!-- RP 240409 Page header minisite - Moved bkg style to external div -->
<div style="background: linear-gradient(180deg, rgba(255, 235, 212, 0.8) -5.28%, rgba(255, 255, 255, 0) 91.17%);">
    <!-- RP 240408 Page header minisite - Changed classes -->
<!-- RP 240409 Page header minisite - Removed bkg style -->
    <div class="container py-12 lg:py-20 md:px-10 lg:px-16 2xl:px-40 grid gap-6 {{ classes }}">
    <!-- RP 240408 Page header minisite - Changed classes -->
        <div class="grid gap-6 sm:flex sm:justify-between md:gap-x-12 relative">
            <div class="grid auto-rows-min gap-6">
                {% if category %}
                {% render '@category--overline', {text: category.text, classes: 'n7-category--sm'}, true %}
                {% endif %}
                <h1 class="n7-heading-4 lg:n7-heading-1 n7-content-01 {{ titleWeight }}">{{ title | safe }}</h1>
                {% if subtitle %}
                <h2 class="n7-heading-6 lg:n7-heading-3">{{subtitle | safe}}</h2>
                {% endif %}
                {% if description %}
                <p class="lg:text-lg xl:text-xl n7-content-01">{{description | safe}}</p>
                {% endif %}
                {% if buttons %}
    <!-- RP 240408 Page header minisite - Changed classes -->
                <div class="grid gap-6 md:flex md:w-max">
                    {% for button in buttons %}
                {% render '@button--size-s', { href: button.href, classes: button.classes, icon: button.icon, iconsize: button.iconsize, label: button.label} %} 
                    {% endfor %}                
                </div>                
                {% endif %}
            </div>
            {% if component %}
    <!-- RP 240408 Page header minisite - Changed classes -->
            <div class="md:grow flex items-start sm:items-center">
                {% render '@' + component.handle, component.context|default({}), true %}
                {# {% if img %}
                <img src="{{ img.path }}" alt="{{ img.alt }}" class="{{ img.classes }}" />
                {% endif %} #}
            </div>
            {% endif %}
            {% if hasBottomBkg %}
            <div class="absolute -bottom-12 lg:-bottom-20 w-full h-[147px]" style="background: radial-gradient(57.95% 15.85% at 50% 106.42%, rgba(204, 196, 181, 0.65) 0%, rgba(204, 196, 181, 0) 100%);"></div>
            {% endif %}
        </div>
    </div>
</div>
 
{
  "mainHidden": true,
  "classes": null,
  "hasBottomBkg": true,
  "category": {
    "text": "category label"
  },
  "title": "IONTORETINA",
  "subtitle": "Trattamento innovativo per la DMLE",
  "description": "Guarda il video con il <strong>Dott. Marco Lombardo</strong> per scoprire questo trattamento.",
  "component": {
    "handle": "video",
    "context": {
      "src": "https://www.youtube-nocookie.com/embed/xiBKvzyW_8Y?si=YBS8eqQa32gdwkFL",
      "parameters": "&controls=2&modestbranding=1&rel=0",
      "overlayImage": null,
      "title": "YouTube video title",
      "classes": "w-full xl:w-[435px] aspect-video rounded-2xl",
      "containerClasses": "grow flex justify-end"
    }
  },
  "buttons": [
    {
      "label": "La Iontoforesi sclerale",
      "icon": "solid--arrow-right",
      "iconsize": "w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6",
      "href": "url",
      "classes": "n7-btn--outline justify-center md:w-fit 2xl:n7-btn--l"
    },
    {
      "label": "Acquista online",
      "icon": "outline--cursor-arrow-rays",
      "iconsize": "w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6",
      "href": "url",
      "classes": "justify-center md:w-fit 2xl:n7-btn--l"
    }
  ]
}

No notes defined.