UCEA

Content Card: Default 

<a href="" class="bg-bkg-white-mix flex flex-col lg:h-full flex-1 transition ease-in-out duration-300 group overflow-hidden shadow-md hover:shadow-lg rounded-lg">

    <div class="relative z-0 order-first ">
        <div class="w-full aspect-[4/3] overflow-hidden">

            <picture class="block overflow-hidden object-cover w-full h-full ">

                <img class="lazyload w-full h-full object-cover transition ease-in-out duration-300 group-hover:scale-110 [&amp;_img]:w-full [&amp;_img]:h-full [&amp;_img]:object-cover " alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">

            </picture>
        </div>
    </div>

    <div class="flex flex-1 relative z-10 flex-col p-6 xl:p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">

        <h2 class="relative text-xl  xl:text-3xl text-heading  font-bold leading-tight pb-2">Lorem ipsum</h2>

        <p class="py-2 text-body text-base xl:text-xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

        <div class="flex w-full justify-end mt-auto">
            <div class="relative overflow-hidden bg-button-2-surface rounded-full w-7 h-7 flex items-center justify-center">
                <div class="absolute w-full h-full flex flex-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-0">
                    <div class="w-full h-full justify-center flex items-center flex-shrink-0">
                        <div class="w-[50%] h-[50%] -mr-0.5">
                            <svg class="w-full h-full relative fill-current" aria-hidden="true">
                                <use href="/front-end/sprite.svg#icon-chevron"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="w-full h-full justify-center flex items-center flex-shrink-0">
                        <div class="w-[50%] h-[50%] -mr-0.5">
                            <svg class="w-full h-full relative fill-current" aria-hidden="true">
                                <use href="/front-end/sprite.svg#icon-chevron"></use>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</a>
 
<a href="{{url}}" class="{% if whiteBg %}bg-white{% else %}bg-bkg-white-mix{% endif %} flex {% if horizontal %}flex-col lg:flex-row{% else %}flex-col{% endif %} lg:h-full flex-1 transition ease-in-out duration-300 group overflow-hidden shadow-md hover:shadow-lg rounded-lg">
{% if tag %}
    <div class="absolute top-0 left-6 xl:left-8 z-10">
            {% render "@tag", tag %}
    </div>
{% endif %}

    {% if image and image.src %}
        <div class="relative z-0 order-first {% if horizontal %}lg:w-5/12 lg:shrink-0{% endif %}">
            <div class="w-full {% if horizontal %}aspect-[16/10] lg:h-full lg:aspect-auto{% else %}aspect-[4/3]{% endif %} overflow-hidden">
                {% render "@image-frame", { 
                    src: image.src, 
                    srcSet: image.srcSet, 
                    width: image.width, 
                    height: image.height, 
                    xsmMax: image.xsmMax, 
                    smMax: image.smMax, 
                    mdMax: image.mdMax, 
                    modifier: 'w-full h-full object-cover transition ease-in-out duration-300 group-hover:scale-110 [&_img]:w-full [&_img]:h-full [&_img]:object-cover', 
                    frameModifier: 'object-cover w-full h-full' 
                } %}
            </div>
        </div>
    {% endif %}

    <div class="flex flex-1 relative z-10 flex-col p-6 xl:p-8 {% if centerText %}text-center items-center{% endif %}" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">

        {% if date %}
            <div class="text-sm mb-2 font-semibold text-grey-500 flex items-center gap-1">
                {% if event %}
                    <span class="inline-flex w-4 h-4 shrink-0 text-grey-500" aria-hidden="true">
                        {% render "@icon", { name: "icon-calendar", modifier: "fill-current w-full h-full -mt-0.5", ariaHidden: true } %}
                    </span>
                {% endif %}
                <span>{{ date }}</span>
            </div>
        {% endif %}

        {% if heading %}
            <h2 class="relative text-xl {% if event or news %} text-grey {% else %} xl:text-3xl text-heading {% endif %} font-bold leading-tight pb-2">{{ heading }}</h2>
        {% endif %}

        {% if copy %}
            <p class="py-2 text-body text-base xl:text-xl">{{ copy }}</p>
        {% endif %}

        {% if showArrow %}
            <div class="flex w-full justify-end mt-auto">
                {% render "@chevron-circle", { class: 'w-4 h-3 text-heading fill-current' } %}
            </div>
        {% endif %}

    </div>
</a>
 
{
  "siteName": "UCEA",
  "heading": "Lorem ipsum",
  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
  "showArrow": true,
  "image": {
    "src": "images/test-imagery/example2@16-10@1200w.jpg",
    "width": 1200,
    "height": 750,
    "srcSet": [
      {
        "url": "images/test-imagery/example2@16-10@1200w.jpg",
        "size": "1200"
      }
    ]
  }
}

No notes defined.