<div class="rounded-2xl overflow-hidden border border-grey-300 max-w-md">
<div class="bg-bravo py-9 px-4 flex flex-col items-center gap-2">
<h2 class="text-white text-xl md:text-2xl font-heading font-medium">Corporate Membership</h2>
<div class="text-white text-center text-lg">Provides complete coverage so say goodbye to poor signal strength</div>
<div class="text-3xl md:text-5xl font-bold text-alpha-500">£4,500</div>
<div class="text-alpha-500 font-heading font-light text;lg">Annual price + VAT</div>
</div>
<div class="bg-white py-6">
<div class="px-4 pt-2 pb-5 text-center">Provides complete coverage so say goodbye to poor signal strength</div>
<div class="border-t border-grey-300" data-vanilla-module="Accordion">
<div class="border-b border-grey-300">
<button id="summary-button-1" aria-controls="accordion-panel-1" class="js-accordion-item-button group peer font-heading font-medium leading-tight flex gap-4 w-full items-center justify-between py-4 px-4 transition" aria-expanded="false">
<div class="w-6 h-6 shrink-0">
<svg class="fill-current w-full h-full">
<use href="/front-end/sprite.svg#icon-tick2"></use>
</svg>
</div>
<p class="text-lg text-bravo-900 transition-colors ease-in-out text-left grow">Reach purchasers and decision makers</p>
<div class="flex shrink-0">
<div class="w-6 h-6">
<div class="w-6 h-6 rounded-full bg-alpha-700 text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-col flex-nowrap top-0 left-0 -translate-y-full transition ease-in-out duration-500 group-hover:translate-y-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%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-3 h-3 transition-colors ease-in-out">
<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="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-3 h-3 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<div id="accordion-panel-1" aria-labelledby="summary-button-1" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block">
<div class="js-accordion-item-content px-4 pb-4">
<div class="text-tiny font-light">
<p>Provides complete coverage so say goodbye to poor signal strength</p>
</div>
</div>
</div>
</div>
<div class="border-b border-grey-300">
<button id="summary-button-2" aria-controls="accordion-panel-2" class="js-accordion-item-button group peer font-heading font-medium leading-tight flex gap-4 w-full items-center justify-between py-4 px-4 transition" aria-expanded="false">
<div class="w-6 h-6 shrink-0">
<svg class="fill-current w-full h-full">
<use href="/front-end/sprite.svg#icon-tick2"></use>
</svg>
</div>
<p class="text-lg text-bravo-900 transition-colors ease-in-out text-left grow">Influence: Get involved in our Special Interest Groups</p>
<div class="flex shrink-0">
<div class="w-6 h-6">
<div class="w-6 h-6 rounded-full bg-alpha-700 text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-col flex-nowrap top-0 left-0 -translate-y-full transition ease-in-out duration-500 group-hover:translate-y-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%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-3 h-3 transition-colors ease-in-out">
<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="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-3 h-3 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<div id="accordion-panel-2" aria-labelledby="summary-button-2" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block">
<div class="js-accordion-item-content px-4 pb-4">
<div class="text-tiny font-light">
<p>Provides complete coverage so say goodbye to poor signal strength</p>
</div>
</div>
</div>
</div>
<div class="border-b border-grey-300">
<button id="summary-button-3" aria-controls="accordion-panel-3" class="js-accordion-item-button group peer font-heading font-medium leading-tight flex gap-4 w-full items-center justify-between py-4 px-4 transition" aria-expanded="false">
<div class="w-6 h-6 shrink-0">
<svg class="fill-current w-full h-full">
<use href="/front-end/sprite.svg#icon-tick2"></use>
</svg>
</div>
<p class="text-lg text-bravo-900 transition-colors ease-in-out text-left grow">Influence: Get involved in our Special Interest Groups</p>
<div class="flex shrink-0">
<div class="w-6 h-6">
<div class="w-6 h-6 rounded-full bg-alpha-700 text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-col flex-nowrap top-0 left-0 -translate-y-full transition ease-in-out duration-500 group-hover:translate-y-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%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-3 h-3 transition-colors ease-in-out">
<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="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-3 h-3 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<div id="accordion-panel-3" aria-labelledby="summary-button-3" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block">
<div class="js-accordion-item-content px-4 pb-4">
<div class="text-tiny font-light">
<p>Provides complete coverage so say goodbye to poor signal strength</p>
</div>
</div>
</div>
</div>
<div class="border-b border-grey-300">
<button id="summary-button-4" aria-controls="accordion-panel-4" class="js-accordion-item-button group peer font-heading font-medium leading-tight flex gap-4 w-full items-center justify-between py-4 px-4 transition" aria-expanded="false">
<div class="w-6 h-6 shrink-0">
<svg class="fill-current w-full h-full">
<use href="/front-end/sprite.svg#icon-tick2"></use>
</svg>
</div>
<p class="text-lg text-bravo-900 transition-colors ease-in-out text-left grow">Influence: Get involved in our Special Interest Groups</p>
<div class="flex shrink-0">
<div class="w-6 h-6">
<div class="w-6 h-6 rounded-full bg-alpha-700 text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-col flex-nowrap top-0 left-0 -translate-y-full transition ease-in-out duration-500 group-hover:translate-y-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%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-3 h-3 transition-colors ease-in-out">
<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="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-3 h-3 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<div id="accordion-panel-4" aria-labelledby="summary-button-4" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block">
<div class="js-accordion-item-content px-4 pb-4">
<div class="text-tiny font-light">
<p>Provides complete coverage so say goodbye to poor signal strength</p>
</div>
</div>
</div>
</div>
<div class="border-b border-grey-300">
<button id="summary-button-5" aria-controls="accordion-panel-5" class="js-accordion-item-button group peer font-heading font-medium leading-tight flex gap-4 w-full items-center justify-between py-4 px-4 transition" aria-expanded="false">
<div class="w-6 h-6 shrink-0">
<svg class="fill-current w-full h-full">
<use href="/front-end/sprite.svg#icon-tick2"></use>
</svg>
</div>
<p class="text-lg text-bravo-900 transition-colors ease-in-out text-left grow">Influence: Get involved in our Special Interest Groups</p>
<div class="flex shrink-0">
<div class="w-6 h-6">
<div class="w-6 h-6 rounded-full bg-alpha-700 text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-col flex-nowrap top-0 left-0 -translate-y-full transition ease-in-out duration-500 group-hover:translate-y-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%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-3 h-3 transition-colors ease-in-out">
<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="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-3 h-3 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<div id="accordion-panel-5" aria-labelledby="summary-button-5" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block">
<div class="js-accordion-item-content px-4 pb-4">
<div class="text-tiny font-light">
<p>Provides complete coverage so say goodbye to poor signal strength</p>
</div>
</div>
</div>
</div>
</div>
<div class="mt-5 text-center">
<a href="./.html" class="btn group bg-alpha-700 text-white border-2 border-alpha-700">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
{%if bgContrast %}
{% set bgColor = "bg-white hover:bg-grey-100" %}
{% else%}
{% set bgColor = "bg-grey-100 hover:bg-grey-100" %}
{% endif %}
{% if buttonColour %}
{% set buttonModifier = buttonColour %}
{% else %}
{% set buttonModifier = 'default' %}
{% endif %}
<div class="rounded-2xl overflow-hidden border border-grey-300 max-w-md">
<div class="bg-bravo py-9 px-4 flex flex-col items-center gap-2">
<h2 class="text-white text-xl md:text-2xl font-heading font-medium">Corporate Membership</h2>
<div class="text-white text-center text-lg">Provides complete coverage so say goodbye to poor signal strength</div>
<div class="text-3xl md:text-5xl font-bold text-alpha-500">£4,500</div>
<div class="text-alpha-500 font-heading font-light text;lg">Annual price + VAT</div>
</div>
<div class="bg-white py-6">
<div class="px-4 pt-2 pb-5 text-center">Provides complete coverage so say goodbye to poor signal strength</div>
<div class="border-t border-grey-300" data-vanilla-module="Accordion">
{% for item in list %}
<div class="border-b border-grey-300">
<button id="summary-button-{{item.id}}" aria-controls="accordion-panel-{{item.id}}" class="js-accordion-item-button group peer font-heading font-medium leading-tight flex gap-4 w-full items-center justify-between py-4 px-4 transition" aria-expanded="false">
<div class="w-6 h-6 {{iconColourClass}} shrink-0">
{% render "@icon", { name: "icon-tick2", modifier: 'fill-current w-full h-full' } %}
</div>
<p class="text-lg text-bravo-900 transition-colors ease-in-out text-left grow">{{ item.tag }}</p>
<div class="flex shrink-0">
<div class="w-6 h-6">
<div class="w-6 h-6 rounded-full bg-alpha-700 text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-col flex-nowrap top-0 left-0 -translate-y-full transition ease-in-out duration-500 group-hover:translate-y-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%] transition ease-in-out duration-300">
{% render "@icon", { name: "icon-chevron", modifier: 'fill-current text-white w-3 h-3 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%] transition ease-in-out duration-300">
{% render "@icon", { name: "icon-chevron", modifier: 'fill-current text-white w-3 h-3 transition-colors ease-in-out' } %}
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<div id="accordion-panel-{{item.id}}" aria-labelledby="summary-button-{{item.id}}" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block">
<div class="js-accordion-item-content px-4 pb-4">
<div class="text-tiny font-light">
{{ item.dropDown | safe }}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% if link %}
<div class="mt-5 text-center">
{% render "@button--" + buttonModifier, link, true %}
</div>
{% endif %}
</div>
</div>
{
"siteName": "BIR Pattern Library",
"heading": "Lorem ipsum",
"copy": "Lorem ipsum dolor sit amet consectetur. Auctor et dignissim urna justo sapien.",
"link": {
"text": "Find out more",
"url": "./"
},
"image": {
"src": "images/test-imagery/example3@16-10@1200w.jpg",
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example3@16-10@1200w.jpg",
"size": "1200"
}
]
},
"list": [
{
"id": 1,
"tag": "Reach purchasers and decision makers",
"dropDown": "<p>Provides complete coverage so say goodbye to poor signal strength</p>"
},
{
"id": 2,
"tag": "Influence: Get involved in our Special Interest Groups",
"dropDown": "<p>Provides complete coverage so say goodbye to poor signal strength</p>"
},
{
"id": 3,
"tag": "Influence: Get involved in our Special Interest Groups",
"dropDown": "<p>Provides complete coverage so say goodbye to poor signal strength</p>"
},
{
"id": 4,
"tag": "Influence: Get involved in our Special Interest Groups",
"dropDown": "<p>Provides complete coverage so say goodbye to poor signal strength</p>"
},
{
"id": 5,
"tag": "Influence: Get involved in our Special Interest Groups",
"dropDown": "<p>Provides complete coverage so say goodbye to poor signal strength</p>"
}
]
}
No notes defined.