BIR Pattern Library

Promo Content Card Component 

<div class="js-component relative z-0 container component-spacer-margin">
    <div class="bg-grey-50 px-6 py-11 lg:p-14 md:flex items-center gap-6 rounded-2xl shadow-lg">
        <div class="flex flex-col w-full  gap-6 content-between">
            <h2 class="text-3xl lg:text-5xl text-bravo-900 flex-1 font-heading font-medium leading-tight">
                Lorem ipsum dolor sit amet consectetur. Dictumst accumsan.
            </h2>

            <div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg max-w-none  ">
                <p>Any questions about the switching process?</p>
            </div>

        </div>

        <div class="mt-4 md:mt-0 shrink-0">

            <a href="./.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">

                <div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">

                    Find out more

                </div>
                <div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
                    <svg class="w-full h-full fill-current" aria-hidden="true">
                        <use href="/front-end/sprite.svg#icon-chevron"></use>
                    </svg>
                </div>

            </a>

        </div>

    </div>
</div>
 
<div class="js-component relative z-0 container component-spacer-margin">
    <div class="bg-grey-50 px-6 py-11 lg:p-14 md:flex items-center gap-6 rounded-2xl shadow-lg">
        <div class="flex flex-col w-full  gap-6 content-between">
            <h2 class="text-3xl lg:text-5xl text-bravo-900 flex-1 font-heading font-medium leading-tight">
                {{ heading }}
            </h2>
            {% if summary %}
                <div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg max-w-none {{richTextColourClass}} {{spacingClasses}}">
                    <p>{{ summary }}</p>
                </div>
            {% endif %}
        </div>
        {% if link %}
            <div class="mt-4 md:mt-0 shrink-0">
                {% render "@button--bravo", link, true %}
            </div>
        {% endif %} 
    </div>
</div>
 
{
  "siteName": "BIR Pattern Library",
  "heading": "Lorem ipsum dolor sit amet consectetur. Dictumst accumsan.",
  "summary": "Any questions about the switching process?",
  "buttonColour": "bravo",
  "link": {
    "text": "Find out more",
    "url": "./"
  }
}
  • Handle: @promo-content-card-component
  • Preview:
  • Filesystem Path: fractal\components\02-umbraco-repeatable-components\promo-content-card-component\promo-content-card-component.nunjucks
  • References (1): @button--bravo

No notes defined.