<div class="js-component relative component-spacer-padding gradient-alpha">
<div class="container flex flex-col lg:flex-row justify-center items-center lg:items-start gap-10 lg:gap-20 xl:gap-40">
<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>
<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>
</div>
</div>
<div class="js-component relative component-spacer-padding gradient-alpha">
<div class="container flex flex-col lg:flex-row justify-center items-center lg:items-start gap-10 lg:gap-20 xl:gap-40">
{% render "@summary-card", card, true %}
{% render "@summary-card", card, true %}
</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."
},
"summaryList": [
{
"counter": "",
"prefix": "",
"suffix": "",
"heading": "Lorem ipsum dolor",
"copy": " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.",
"icon": "icon-pin"
},
{
"counter": "",
"prefix": "",
"suffix": "%",
"heading": "Lorem ipsum dolor",
"copy": " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.",
"icon": "icon-pin"
},
{
"counter": "",
"prefix": "",
"suffix": "",
"heading": "Lorem ipsum dolor",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.",
"icon": "icon-pin"
}
]
}
No notes defined.