Etat Pur Design System

Product Hero Section: Default 

<section class="adjusted-marg-b-md container grid-layout">
    <div class="col-span-4 sm:col-span-12 lg:col-span-10 lg:col-start-2 grid grid-cols-1 sm:grid-cols-2 gap-12 md:gap-6 lg:gap-8 3xl:gap-10 items-start">

        <div class="order-1 space-y-8">
            <div class="space-y-4">
                <h2 class="h1">
                    Titre de niveau 1
                </h2>

                <h3 class="h2">
                    Titre de niveau 2
                </h3>

                <h4 class="h3">
                    Titre de niveau 3
                </h4>
            </div>

            <div class="text-body-base wysiwyg-content">
                Viverra nibh cras pulvinar mattis nunc. Duis convallis convallis tellus id. Sit amet consectetur adipiscing elit pellentesque habitant. Faucibus ornare suspendisse sed nisi lacus. Morbi leo urna molestie at elementum eu. Non diam phasellus vestibulum lorem sed risus. Viverra accumsan in nisl nisi scelerisque. Quis lectus nulla at volutpat diam ut venenatis tellus in.
            </div>

            <div class="pt-4">
                <a href="#" type="button" class="justify-self-start  btn  btn-dark  btn-outline  btn-size-lg">
                    Secondaire

                </a>
            </div>
        </div>

        <div class="order-2 relative">
            <div class="relative">
                <img src="/img/text-image/img.png" alt="Description de l'image" class="object-cover aspect-[3/4] w-full" />
                <svg class="absolute left-4 -bottom-10 z-10 shrink-0" width="42" height="72" stroke="currentColor" stroke-width="1.5" viewBox="0 0 42 72" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M40.9633 1.00586C15.3735 13.8061 -1.08403 42.4366 9.75101 69.5721M14.5688 62.8228L10.1967 70.4917C6.1843 69.1879 1.2373 63.0129 1.2373 63.0129" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg>
            </div>
            <p class="mt-12 text-script">Le brevet SkinAffinity garantit des Soins Purs exclusivement composés à plus de 97% d'ingrédients actifs biomimétiques.</p>

        </div>
    </div>
</section>
 
{% set layout = layout|default({ imagePosition: 'right' }) %}

<section class="adjusted-marg-b-md container grid-layout">
    <div class="col-span-4 sm:col-span-12 lg:col-span-10 lg:col-start-2 grid grid-cols-1 sm:grid-cols-2 gap-12 md:gap-6 lg:gap-8 3xl:gap-10 items-start">
        {% set contentClass = layout.imagePosition == 'right' ? 'order-1' : 'order-2' %}
        {% set imageClass = layout.imagePosition == 'right' ? 'order-2' : 'order-1' %}

        <div class="{{ contentClass }} space-y-8">
            {% if headings %}
                <div class="space-y-4">
                    {% if headings.h1 %}
                        <h2 class="h1">
                            {{ headings.h1 }}
                        </h2>
                    {% endif %}

                    {% if headings.h2 %}
                        <h3 class="h2">
                            {{ headings.h2 }}
                        </h3>
                    {% endif %}

                    {% if headings.h3 %}
                        <h4 class="h3">
                            {{ headings.h3 }}
                        </h4>
                    {% endif %}
                </div>
            {% endif %}

            {% if description %}
                <div class="text-body-base wysiwyg-content">
                    {{ description }}
                </div>
            {% endif %}

            {% if cta %}
                <div class="pt-4">
                    {% render "@template-button" with {
                        label: cta.label,
                        href: cta.href,
                        color: cta.color,
                        type: cta.type,
                        icon_type: cta.icon_type,
                        icon: {
                            name: cta.icon.name,
                        },
                        button_class: "justify-self-start"
                    } %}
                </div>
            {% endif %}
        </div>

        <div class="{{ imageClass }} relative">
            <div class="relative">
                <img
                        src="{{ image.src }}"
                        alt="{{ image.alt }}"
                        class="object-cover aspect-[3/4] w-full"
                />
                {% if caption %}
                    {% render "@icons-heroicons--design-arrow" with {
                        width: 42,
                        height: 72,
                        iconClass: 'absolute left-4 -bottom-10 z-10'
                    } %}
                {% endif %}
            </div>
            {% if caption %}
                <p class="mt-12 text-script">{{ caption }}</p>
            {% endif %}

        </div>
    </div>
</section>
 
{
  "layout": {
    "imagePosition": "right"
  },
  "image": {
    "src": "/img/text-image/img.png",
    "alt": "Description de l'image"
  },
  "headings": {
    "h1": "Titre de niveau 1",
    "h2": "Titre de niveau 2",
    "h3": "Titre de niveau 3"
  },
  "description": "Viverra nibh cras pulvinar mattis nunc. Duis convallis convallis tellus id. Sit amet consectetur adipiscing elit pellentesque habitant. Faucibus ornare suspendisse sed nisi lacus. Morbi leo urna molestie at elementum eu. Non diam phasellus vestibulum lorem sed risus. Viverra accumsan in nisl nisi scelerisque. Quis lectus nulla at volutpat diam ut venenatis tellus in. ",
  "caption": "Le brevet SkinAffinity garantit des Soins Purs exclusivement composés à plus de 97% d'ingrédients actifs biomimétiques.",
  "cta": {
    "label": "Secondaire",
    "href": "#",
    "color": "dark",
    "type": "outline",
    "icon_type": "classic"
  }
}

No notes defined.