UCEA

Promo Content Card Component: Default Dark 

<div class="js-component relative z-0 container component-spacer-margin" data-theme="teal" data-mode="dark">
    <div class="bg-bkg p-8 md:flex items-center rounded-lg">
        <h2 class="text-xl flex-1 font-bold leading-tight text-white">
            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-button-surface text-button-text border-2 border-button-surface hover:bg-button-surface-hover hover:border-button-surface-hover">

                    Find out more

                </a>

            </div>

        </div>
    </div>
</div>
 
<div class="js-component relative z-0 container component-spacer-margin" {% if dataTheme %}data-theme="{{ dataTheme }}"{% endif %} {% if dataMode %}data-mode="{{ dataMode }}"{% endif %}>
    <div class="bg-bkg p-8 md:flex items-center rounded-lg">
        <h2 class="text-xl flex-1 font-bold leading-tight {% if dataMode == 'dark' %}text-white{% else %}text-heading{% endif %}">
            {{ heading }}
         </h2>
         <div>
            {% if link %}
                <div class="mt-4 md:mt-0 md:ml-4">
                    {% render "@button--themed", link, true %}
                </div>
            {% endif %}
         </div>  
    </div>
</div>
 
{
  "siteName": "UCEA",
  "dataTheme": "teal",
  "heading": "Stay updated on our latest news, volunteering and fundraising events",
  "link": {
    "text": "Find out more",
    "url": "./"
  },
  "dataMode": "dark"
}
  • Handle: @promo-content-card-component--default-dark
  • Preview:
  • Filesystem Path: fractal\components\02-umbraco-repeatable-components\promo-content-card-component\promo-content-card-component.nunjucks
  • References (1): @button--themed

No notes defined.