MentorKit Pattern Library

Promo Content Card Component 

<div class="js-component relative z-0 container component-spacer-margin">
    <div class="bg-grey-50 p-8 md:flex items-center rounded-md shadow-lg">
        <h2 class="text-xl text-bravo  flex-1 font-heading font-bold leading-tight">
            Stay updated on our latest news, volunteering and fundraising events
        </h2>
        <div>

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

                <a href="./.html" class="btn bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800">

                    Find out more

                </a>

            </div>

        </div>
    </div>
</div>
 
<div class="js-component relative z-0 container component-spacer-margin">
    <div class="bg-grey-50 p-8 md:flex items-center rounded-md shadow-lg">
         <h2 class="text-xl text-bravo  flex-1 font-heading font-bold leading-tight">
            {{ heading }}
         </h2>
         <div>
            {% if link %}
                <div class="mt-4 md:mt-0 md:ml-4">
                    {% render "@button--default", link, true %}
                </div>
            {% endif %}
         </div>  
    </div>
</div>
 
{
  "siteName": "MentorKit Pattern Library",
  "heading": "Stay updated on our latest news, volunteering and fundraising events",
  "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--default

No notes defined.