<div class="js-component relative z-0 component-spacer-margin">
    <div class="container">

        <div class="lg:flex space-y-8 lg:space-y-0 lg:space-x-8">

            <div class="prose xl:prose-lg max-w-none flex-1">
                <h2>Heading 1</h2>
                <p><a href=''>Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. Etiam felis nibh, faucibus at sapien eu, ultricies placerat enim. Sed id iaculis ipsum, ac maximus mauris. Ut velit odio, scelerisque vitae tristique eget, accumsan vestibulum neque.</p>
            </div>

            <div class="prose xl:prose-lg max-w-none flex-1">
                <h2>Heading 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam felis nibh, faucibus at sapien eu, ultricies placerat enim. Sed id iaculis ipsum, ac maximus mauris. <a href=''>Ut velit odio</a>, scelerisque vitae tristique eget, accumsan vestibulum neque.</p>
            </div>

            <div class="prose xl:prose-lg max-w-none flex-1">
                <h2>Heading 3</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam felis nibh, faucibus at sapien eu, ultricies placerat enim. Sed id iaculis ipsum, ac maximus mauris. Ut velit odio, scelerisque vitae tristique eget, accumsan vestibulum neque.</p>
            </div>

        </div>

    </div>
</div>
{% if bgContrast %}
{% set bgClass = "component-spacer-padding bg-grey-50" %}
{% else %}
{% set bgClass = "component-spacer-margin" %}
{% endif %}

<div class="js-component relative z-0 {{bgClass}}">
    <div class="container">
        {% if text and not text2 and not text3 %}
            <div class="max-w-screen-md mx-auto">
                <div class="prose xl:prose-lg max-w-none">
                    {{ text | safe }}
                </div>
            </div>
        {% else %}
             <div class="lg:flex space-y-8 lg:space-y-0 lg:space-x-8">
                {% if text %}
                    <div class="prose xl:prose-lg max-w-none flex-1">
                        {{ text | safe }}
                    </div>
                {% endif %}
                {% if text2 %}
                    <div class="prose xl:prose-lg max-w-none flex-1">
                        {{ text2 | safe }}
                    </div>
                {% endif %}
                {% if text3 %}
                    <div class="prose xl:prose-lg max-w-none flex-1">
                        {{ text3 | safe }}
                    </div>
                {% endif %}
             </div>
        {% endif %}
    </div>
</div>
{
  "siteName": "MentorKit Pattern Library",
  "text": "<h2>Heading 1</h2><p><a href=''>Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. Etiam felis nibh, faucibus at sapien eu, ultricies placerat enim. Sed id iaculis ipsum, ac maximus mauris. Ut velit odio, scelerisque vitae tristique eget, accumsan vestibulum neque.</p>",
  "text2": "<h2>Heading 2</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam felis nibh, faucibus at sapien eu, ultricies placerat enim. Sed id iaculis ipsum, ac maximus mauris. <a href=''>Ut velit odio</a>, scelerisque vitae tristique eget, accumsan vestibulum neque.</p>",
  "text3": "<h2>Heading 3</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam felis nibh, faucibus at sapien eu, ultricies placerat enim. Sed id iaculis ipsum, ac maximus mauris. Ut velit odio, scelerisque vitae tristique eget, accumsan vestibulum neque.</p>"
}
  • Handle: @rich-text-component--3-col
  • Preview:
  • Filesystem Path: fractal\components\02-umbraco-repeatable-components\rich-text-component\rich-text-component.nunjucks

No notes defined.