<div class="js-component component-spacer-padding relative z-0 my-8 lg:my-16">
<div class="container">
<div class="border-t pt-6 border-grey-300 max-w-screen-lg mx-auto">
<div class="flex flex-col gap-6 lg:flex-row lg:gap-12">
<div class="shrink-0 w-auto">
<h2 class="text-base uppercase font-semibold text-heading mb-4">Published</h2>
<div class="text-xl">
05/10/2022
</div>
</div>
<div class="flex-1">
<h2 class="text-base uppercase font-semibold text-heading mb-4">Tags</h2>
<div>
<a class="text-heading leading-none transition ease-in-out duration-300 text-xl hover:underline" href="./article-list?Example Single Filter=Events.html">
Events</a>,
<a class="text-heading leading-none transition ease-in-out duration-300 text-xl hover:underline" href="./article-list?Example Multi-Filter=Scotland.html">
Scotland</a>
</div>
</div>
<div class="shrink-0 w-auto">
<h2 class="text-base uppercase font-semibold text-heading mb-4">Share</h2>
<div class="flex items-center gap-3">
<div class="shrink-0">
<a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 bg-button-surface hover:bg-button-surface-hover" href="./.html">
<span class="w-5 h-5 text-button-2-surface">
<svg class="w-full h-full fill-current " aria-hidden="true">
<use href="/front-end/sprite.svg#icon-bluesky"></use>
</svg>
</span>
<span class="sr-only">Open Bluesky (opens in new window)</span>
</a>
</div>
<div class="shrink-0">
<a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 bg-button-surface hover:bg-button-surface-hover" href="./.html">
<span class="w-5 h-5 text-button-2-surface">
<svg class="w-full h-full fill-current " aria-hidden="true">
<use href="/front-end/sprite.svg#icon-linkedin"></use>
</svg>
</span>
<span class="sr-only">Open LinkedIn (opens in new window)</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component component-spacer-padding relative z-0 my-8 lg:my-16" {% if dataTheme %}data-theme="{{ dataTheme }}"{% endif %}
{% if dataMode %}data-mode="{{ dataMode }}"{% endif %}>
<div class="container">
<div class="border-t pt-6 border-grey-300 max-w-screen-lg mx-auto">
<div class="flex flex-col gap-6 lg:flex-row lg:gap-12">
{% if publishedDate %}
<div class="shrink-0 w-auto">
<h2 class="text-base uppercase font-semibold text-heading mb-4">Published</h2>
<div class="text-xl">
{{ publishedDate }}
</div>
</div>
{% endif %}
<div class="flex-1">
<h2 class="text-base uppercase font-semibold text-heading mb-4">Tags</h2>
<div>
{% for item in tags %}
<a class="text-heading leading-none transition ease-in-out duration-300 text-xl hover:underline" href="{{ ('./article-list?' + item.tagCategory + '=' + item.tagName) | path }}">
{{ item.tagName }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
</div>
</div>
<div class="shrink-0 w-auto">
<h2 class="text-base uppercase font-semibold text-heading mb-4">Share</h2>
<div class="flex items-center gap-3">
{% for item in socialList %}
<div class="shrink-0">
<a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 bg-button-surface hover:bg-button-surface-hover" href="{{ item.url | path }}">
<span class="w-5 h-5 text-button-2-surface">
{% render "@icon", { name: item.iconName, modifier: "w-full h-full fill-current ", ariaHidden: true } %}
</span>
<span class="sr-only">Open {{ item.name }} (opens in new window)</span>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
{
"siteName": "UCEA",
"dataTheme": "",
"dataMode": "",
"heading": "Lorem ipsum title",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"publishedDate": "05/10/2022",
"image": {
"src": "images/test-imagery/example2@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example2@16-9@1200w.jpg",
"size": "1200"
}
]
},
"socialList": [
{
"url": "./",
"iconName": "icon-bluesky",
"name": "Bluesky"
},
{
"url": "./",
"iconName": "icon-linkedin",
"name": "LinkedIn"
}
],
"tags": [
{
"tagCategory": "Example Single Filter",
"tagName": "Events"
},
{
"tagCategory": "Example Multi-Filter",
"tagName": "Scotland"
}
]
}
No notes defined.