<div class="js-component relative z-0 container component-spacer-margin">
<div class="w-full max-w-screen-md mx-auto">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">Lorem ipsum dolor</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-4 lg:mt-6 text-bravo-900 max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="border-grey-400 border rounded-2xl overflow-hidden">
<a href="./" class="flex items-center border-t border-grey-400 first:border-0 p-6 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg text-bravo-900">Site name</h3>
<h2 class="text-2xl text-bravo-900">Page title or description
</div>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<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="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="./" class="flex items-center border-t border-grey-400 first:border-0 p-6 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg text-bravo-900">Site name</h3>
<h2 class="text-2xl text-bravo-900">Page title or description
</div>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<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="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="./" class="flex items-center border-t border-grey-400 first:border-0 p-6 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg text-bravo-900">Site name</h3>
<h2 class="text-2xl text-bravo-900">Page title or description
</div>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<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="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="./" class="flex items-center border-t border-grey-400 first:border-0 p-6 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg text-bravo-900">Site name</h3>
<h2 class="text-2xl text-bravo-900">Page title or description
</div>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<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="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="w-full max-w-screen-md mx-auto">
{% render "@headline", headline %}
<div class="border-grey-400 border rounded-2xl overflow-hidden">
{% for item in list %}
<a href="{{item.url}}" class="flex items-center border-t border-grey-400 first:border-0 p-6 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg text-bravo-900">{{item.label}}</h3>
<h2 class="text-2xl text-bravo-900">{{item.heading}}
</div>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<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="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
{% render "@icon", { name: "icon-arrow", modifier: 'fill-current text-white w-4 h-4 transition-colors ease-in-out' } %}
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
{% render "@icon", { name: "icon-arrow", modifier: 'fill-current text-white w-4 h-4 transition-colors ease-in-out' } %}
</div>
</div>
</div>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</div>
{
"siteName": "BIR Pattern Library",
"headline": {
"heading": "Lorem ipsum dolor",
"summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
"list": [
{
"label": "Site name",
"heading": "Page title or description",
"url": "./"
},
{
"label": "Site name",
"heading": "Page title or description",
"url": "./"
},
{
"label": "Site name",
"heading": "Page title or description",
"url": "./"
},
{
"label": "Site name",
"heading": "Page title or description",
"url": "./"
}
]
}
No notes defined.