<div class="js-component container component-spacer-margin">
<div class="gradient-alpha px-4 pt-4 pb-6 sm:px-6 sm:py-8 slg:py-6 slg:px-10 relative rounded-3xl overflow-hidden">
<div class="flex flex-col slg:flex-row relative z-20 gap-8 slg:gap-10">
<div class="flex-1 flex items-center order-last slg:order-first">
<div class="xl:pl-10 xl:pr-8 flex flex-col gap-11 md:py-8">
<div>
<div class="text-bravo text-3xl sm:text-4xl xl:text-5xl font-heading font-medium">Membership benefits</div>
<div class="text-bravo text-lg xl:text-xl mt-4">Working together to improve medicine, health and patient care through the science and practice of imaging and radiation oncology</div>
</div>
<div class="grid grid-cols-2 gap-6">
<div class="flex items-center gap-3">
<div class="w-6 h-6 text-alpha-700 shrink-0">
<svg class="fill-current w-full h-full">
<use href="/front-end/sprite.svg#icon-tick2"></use>
</svg>
</div>
<div class="text-bravo font-heading sm:text-lg font-medium leading-tight">Education and events with CPD</div>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 text-alpha-700 shrink-0">
<svg class="fill-current w-full h-full">
<use href="/front-end/sprite.svg#icon-tick2"></use>
</svg>
</div>
<div class="text-bravo font-heading sm:text-lg font-medium leading-tight">BIR journals</div>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 text-alpha-700 shrink-0">
<svg class="fill-current w-full h-full">
<use href="/front-end/sprite.svg#icon-tick2"></use>
</svg>
</div>
<div class="text-bravo font-heading sm:text-lg font-medium leading-tight">Practical resources</div>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 text-alpha-700 shrink-0">
<svg class="fill-current w-full h-full">
<use href="/front-end/sprite.svg#icon-tick2"></use>
</svg>
</div>
<div class="text-bravo font-heading sm:text-lg font-medium leading-tight">Get involved/Career development</div>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 text-alpha-700 shrink-0">
<svg class="fill-current w-full h-full">
<use href="/front-end/sprite.svg#icon-tick2"></use>
</svg>
</div>
<div class="text-bravo font-heading sm:text-lg font-medium leading-tight">Other benefits</div>
</div>
</div>
<div class="">
<a href="./.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Join
</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="flex-1 flex items-center relative z-0 rounded-2xl order-first ">
<div class="xl:pl-32 w-full h-auto">
<picture class="block overflow-hidden h-full rounded-2xl w-full">
<img class="lazyload h-full object-cover rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@1-1@1200w.jpg">
</picture>
</div>
</div>
</div>
</div>
</div>
{% if buttonColour %}
{% set buttonModifier = buttonColour %}
{% else %}
{% set buttonModifier = 'bravo' %}
{% endif %}
{% if theme %}
{% set bgClass = theme.bgColour %}
{% set textColourClass = theme.textColourClass %}
{% set iconColourClass = theme.iconColourClass %}
{% else %}
{% set bgClass = "gradient-alpha" %}
{% set textColourClass = "text-bravo" %}
{% set iconColourClass = "text-alpha-700" %}
{% endif %}
<div class="js-component container component-spacer-margin">
<div class="{{bgClass}} px-4 pt-4 pb-6 sm:px-6 sm:py-8 slg:py-6 slg:px-10 relative rounded-3xl overflow-hidden">
{% if theme.bgColour == 'gradient-dark' %}
<div class="absolute w-full h-full top-0 left-0 bg-bravo-900 opacity-50 z-10"></div>
{% endif %}
<div class="flex flex-col slg:flex-row relative z-20 gap-8 slg:gap-10">
<div class="flex-1 flex items-center order-last slg:order-first">
<div class="xl:pl-10 xl:pr-8 flex flex-col gap-11 md:py-8">
<div>
{% if heading %}
<div class="{{textColourClass}} text-3xl sm:text-4xl xl:text-5xl font-heading font-medium">{{ heading }}</div>
{% endif %}
{% if summary %}
<div class="{{textColourClass}} text-lg xl:text-xl mt-4">{{ summary }}</div>
{% endif %}
</div>
<div class="grid grid-cols-2 gap-6">
{% for item in list %}
<div class="flex items-center gap-3">
<div class="w-6 h-6 {{iconColourClass}} shrink-0">
{% render "@icon", { name: "icon-tick2", modifier: 'fill-current w-full h-full' } %}
</div>
<div class="{{textColourClass}} font-heading sm:text-lg font-medium leading-tight">{{item.copy}}</div>
</div>
{% endfor %}
</div>
{% if link %}
<div class="">
{% render "@button--" + buttonModifier, link, true %}
</div>
{% endif %}
</div>
</div>
<div class="flex-1 flex items-center relative z-0 rounded-2xl {{imageContainer}} order-first ">
<div class="xl:pl-32 w-full h-auto">
{% if image %}
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, modifier: 'h-full object-cover rounded-2xl', frameModifier: 'h-full rounded-2xl', width: 1200, height: 750 } %}
{% elseif backgroundVideo %}
<div class="relative w-full h-full rounded-2xl">
<div class="aspect-[16/10]"></div>
<video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0 rounded-2xl" muted autoplay loop playsinline>
<source src="{{backgroundVideo.src}}" type="video/mp4">
</video>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{
"siteName": "BIR Pattern Library",
"heading": "Membership benefits",
"summary": "Working together to improve medicine, health and patient care through the science and practice of imaging and radiation oncology",
"link": {
"text": "Join",
"url": "./"
},
"image": {
"src": "images/test-imagery/example11@1-1@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example11@1-1@1200w.jpg",
"size": "1200"
}
]
},
"list": [
{
"copy": "Education and events with CPD"
},
{
"copy": "BIR journals"
},
{
"copy": "Practical resources"
},
{
"copy": "Get involved/Career development"
},
{
"copy": "Other benefits"
}
]
}
No notes defined.