<div class="js-component relative z-0 bg-bkg component-spacer-padding " data-theme="red">
<div class="container">
<div class="max-w-screen-sm mx-auto text-center">
<h2 class="text-3xl xl:text-6xl mb-4 font-bold leading-tight text-heading">
Link list
</h2>
<div class="mb-8 max-w-none prose xl:prose-lg leading-tight">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class=" max-w-screen-md mx-auto py-4">
<div class="flex flex-col gap-4 items-stretch">
<div class="h-full flex flex-col">
<div class="rounded-xl w-full hover:shadow-md transition-shadow duration-300 border-[1px] border-grey-200 bg-white h-full overflow-hidden">
<a href="./" class="flex h-full">
<div class="flex items-center bg-heading m-0 px-3.5 md:px-9 py-6 text-white">
<svg class="w-6 md:w-8 h-8 md:h-10 fill-current text-white justify-self-center">
<use href="/front-end/sprite.svg#icon-pdf"></use>
</svg>
</div>
<div class="text-left w-full p-4 lg:p-6 pr-0 xl:pr-2 flex flex-col justify-center">
<p class="w-10/12 text-lg leading-tight font-bold text-heading mb-1">PDF title (strategic framework 2025-27)</p>
<p class="w-10/12 leading-tight font-light text-grey">PDF 220KB</p>
</div>
<div class="flex items-center p-4 md:pr-6 md:pl-0">
<svg class="fill-current text-heading w-8 md:w-10 h-6 md:h-8">
<use href="/front-end/sprite.svg#icon-download"></use>
</svg>
</div>
</a>
</div>
</div>
<div class="h-full flex flex-col">
<div class="rounded-xl w-full hover:shadow-md transition-shadow duration-300 border-[1px] border-grey-200 bg-white h-full overflow-hidden">
<a href="./" class="flex h-full">
<div class="flex items-center bg-heading m-0 px-3.5 md:px-9 py-6 text-white">
<svg class="w-6 md:w-8 h-8 md:h-10 fill-current text-white justify-self-center">
<use href="/front-end/sprite.svg#icon-link"></use>
</svg>
</div>
<div class="text-left w-full p-4 lg:p-6 pr-0 xl:pr-2 flex flex-col justify-center">
<p class="w-10/12 text-lg leading-tight font-bold text-heading mb-1">External link title</p>
<p class="w-10/12 leading-tight font-light text-grey">Lorem ipsum dolor sit amet</p>
</div>
<div class="flex items-center p-4 md:pr-6 md:pl-0">
<svg class="fill-current text-heading w-8 md:w-10 h-6 md:h-8">
<use href="/front-end/sprite.svg#icon-external-link"></use>
</svg>
</div>
</a>
</div>
</div>
<div class="h-full flex flex-col">
<div class="rounded-xl w-full hover:shadow-md transition-shadow duration-300 border-[1px] border-grey-200 bg-white h-full overflow-hidden">
<a href="./" class="flex h-full">
<div class="flex items-center bg-heading m-0 px-3.5 md:px-9 py-6 text-white">
<svg class="w-6 md:w-8 h-8 md:h-10 fill-current text-white justify-self-center">
<use href="/front-end/sprite.svg#icon-link"></use>
</svg>
</div>
<div class="text-left w-full p-4 lg:p-6 pr-0 xl:pr-2 flex flex-col justify-center">
<p class="w-10/12 text-lg leading-tight font-bold text-heading mb-1">Internal link title</p>
<p class="w-10/12 leading-tight font-light text-grey">Lorem ipsum dolor sit amet</p>
</div>
<div class="flex items-center p-4 md:pr-6 md:pl-0">
<svg class="fill-current text-heading w-6 md:w-7 h-4 md:h-5">
<use href="/front-end/sprite.svg#icon-internal-link"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="js-component relative z-0 {% if whiteBg %}bg-white component-spacer-margin{% else %}bg-bkg component-spacer-padding {% endif %}"
{% if dataTheme %}data-theme="{{ dataTheme }}"{% endif %}
{% if dataMode %}data-mode="{{ dataMode }}"{% endif %}
>
<div class="container">
<div class="max-w-screen-sm mx-auto text-center">
<h2 class="text-3xl xl:text-6xl mb-4 font-bold leading-tight text-heading">
{{heading}}
</h2>
<div class="mb-8 max-w-none prose xl:prose-lg leading-tight">
{{ description | safe }}
</div>
</div>
<div class="{% if twoCols %} max-w-screen-lg {% else %} max-w-screen-md {% endif %} mx-auto py-4">
{% if twoCols %}
<div class="grid grid-cols-1 md:grid-cols-2 gap-y-4 lg:gap-y-5 gap-x-5 xl:gap-x-6 items-stretch">
{% for object in list %}
<div class="[&>div]:h-full">
{% render "@media-link", object.context %}
</div>
{% endfor %}
</div>
{% else %}
<div class="flex flex-col gap-4 items-stretch">
{% for object in list %}
<div class="h-full flex flex-col">
{% render "@media-link", object.context %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
{
"siteName": "UCEA",
"dataTheme": "red",
"heading": "Link list",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"list": [
{
"name": "default",
"label": "Download",
"context": {
"title": "PDF title (strategic framework 2025-27)",
"subtext": "PDF 220KB",
"downloadLink": true,
"downloadIcon": "icon-pdf",
"otherLink": true,
"linkIcon": "icon-download",
"url": "./"
}
},
{
"name": "link-external",
"label": "Link External",
"context": {
"title": "External link title",
"subtext": "Lorem ipsum dolor sit amet",
"downloadLink": true,
"otherLink": true,
"downloadIcon": "icon-link",
"linkIcon": "icon-external-link",
"url": "./"
}
},
{
"name": "link-internal",
"label": "Link Internal",
"context": {
"title": "Internal link title",
"subtext": "Lorem ipsum dolor sit amet",
"downloadLink": true,
"otherLink": true,
"downloadIcon": "icon-link",
"linkIcon": "icon-internal-link",
"url": "./"
}
}
]
}
No notes defined.