Fractal demo

Hero: Accent 

<section class="bg-teal-200">
    <div class="grid md:grid-cols-2 items-center">

        <img src="../../pictures/feathers.jpg" alt="" loading="lazy" class="image w-full h-64 md:h-full md:w-auto object-cover" />

        <div class="py-6 sm:py-10 md:py-12 lg:py-20 xl:py-24">
            <div class="container md:max-w-xl md:px-10 lg:px-12">
                <h1 class="text-4xl tracking-tight leading-10 font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">
                    Atoms.<br><span class="text-teal-600">Molecules.</span><br>Organisms.
                </h1>

                <p class="mt-3 text-lg sm:text-xl md:mt-5 md:max-w-3xl text-teal-500">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In, qui, possimus natus autem a minus quaerat voluptate laboriosam, aut harum esse deserunt.
                </p>

            </div>
        </div>
    </div>
</section>
 
<section class="{% if class %}{{ class }}{% endif %}">
    <div class="grid md:grid-cols-2 items-center">
        {% if component %}
            {% render '@' + component.handle, component.context|default({}), true %}
        {% endif %}

        <div class="py-6 sm:py-10 md:py-12 lg:py-20 xl:py-24">
            <div class="container md:max-w-xl md:px-10 lg:px-12">
                <h1 class="text-4xl tracking-tight leading-10 font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">
                    {{ title | safe }}
                </h1>
                {% if body %}
                    <p class="mt-3 text-lg sm:text-xl md:mt-5 md:max-w-3xl{% if bodyClass %} {{ bodyClass }}{% endif %}">
                        {{ body }}
                    </p>
                {% endif %}
                {% if buttons.primary or buttons.secondary %}
                    <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 %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>
 
{
  "class": "bg-teal-200",
  "bodyClass": "text-teal-500",
  "title": "Atoms.<br><span class=\"text-teal-600\">Molecules.</span><br>Organisms.",
  "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. In, qui, possimus natus autem a minus quaerat voluptate laboriosam, aut harum esse deserunt.",
  "buttons": null,
  "component": {
    "handle": "image",
    "context": {
      "src": "/pictures/feathers.jpg",
      "class": "w-full h-64 md:h-full md:w-auto object-cover"
    }
  }
}

No notes defined.