<!DOCTYPE html>
<html class="min-h-full" lang="en-GB">
<head>
<title>BIR Pattern Library</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="icon" type="image/png" href="/front-end/images/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/front-end/images/favicon/favicon.svg" />
<link rel="shortcut icon" href="/front-end/images/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/front-end/images/favicon/apple-touch-icon.png" />
<link rel="manifest" href="/front-end/images/favicon/site.webmanifest" />
<script type="module" src="/front-end/assets/main-D07jIOCb.js"></script>
<script type="module" src="/front-end/assets/contentListingApp-DSaeokWL.js"></script>
<link href="/front-end/assets/styles-B7zZSLiL.css" rel="stylesheet">
</head>
<body class="font-body flex flex-col min-h-screen text-bravo-900 overflow-x-hidden">
<a href="#main-content" class="focus:block sr-only focus:not-sr-only focus:z-50 focus:bg-alpha focus:p-4 focus:border-2 focus:border-white focus:text-white focus:absolute focus:top-2 focus:left-2 focus:shadow-sm">
Skip to content
</a>
<header class="js-header sticky top-0 w-full z-20 transform ease-in-out duration-500 flex-shrink-0 flex-grow-0" data-vanilla-module="StickyHeader">
<div class="bg-white py-6 relative">
<div class="container">
<div class="flex flex-row justify-between items-stretch">
<a href="./index.html" class="flex items-center w-24 lg:w-auto">
<img src="/front-end/images/logo.svg" class="" alt="British Institute of Radiology" width="173" height="72" />
</a>
<div class="flex flex-col gap-4 justify-center">
<div class="justify-end gap-6 hidden lg:flex">
<ul class="flex justify-end space-x-10 items-center">
<li class="relative">
<a class="text-bravo font-heading flex items-center font-medium text-3xl lg:text-base hover:underline" href="./join-us.html">
Join us
</a>
</li>
</ul>
<div class="items-center hidden lg:flex gap-6">
<div class="flex items-center">
<button class="block w-5 h-5 lg:w-6 lg:h-6" data-micromodal-trigger="search-modal">
<span class="sr-only">
Open Search Modal
</span>
<svg class="fill-current w-full h-full text-bravo transition-colors ease-in-out duration-300" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-search"></use>
</svg>
</button>
</div>
<a href="" 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">
Login
</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">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
<div class="flex items-center lg:items-stretch lg:justify-end lg:flex-1 lg:pl-4">
<div class="items-center flex lg:hidden mr-5">
<div class="flex items-center gap-5">
<button>
<span class="sr-only">
login
</span>
<div class="h-5 w-5">
<svg class="w-full h-full fill-current text-bravo" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-user"></use>
</svg>
</div>
</button>
<button class="block w-5 h-5 lg:w-6 lg:h-6" data-micromodal-trigger="search-modal">
<span class="sr-only">
Open Search Modal
</span>
<svg class="fill-current w-full h-full text-bravo transition-colors ease-in-out duration-300" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-search"></use>
</svg>
</button>
</div>
</div>
<button aria-controls="menu" aria-expanded="false" data-vanilla-module="MobileMenuToggle" class="w-8 h-6 block relative transform lg:hidden text-bravo-900 group" data-state="off">
<span aria-hidden="true" class="block rounded-2xl absolute h-1 w-8 bg-current transform transition duration-500 ease-in-out group-data-[state=off]:-translate-y-2 group-data-[state=on]:rotate-45"></span>
<span aria-hidden="true" class="block rounded-2xl absolute h-1 w-8 bg-current transform transition duration-500 ease-in-out group-data-[state=on]:opacity-0"></span>
<span aria-hidden="true" class="block rounded-2xl absolute h-1 w-8 bg-current transform transition duration-500 ease-in-out group-data-[state=off]:translate-y-2 group-data-[state=on]:-rotate-45"></span>
<span class="sr-only">Toggle Menu</span>
</button>
<nav id="menu" data-vanilla-module="Menu" class="items-center h-[calc(100dvh-var(--mobile-header-height))] hidden absolute overflow-hidden lg:overflow-visible z-50 top-full left-0 bg-white w-full lg:h-auto lg:flex lg:bg-transparent lg:static lg:p-0 lg:left-auto lg:w-auto">
<div class="overflow-y-auto lg:overflow-visible h-full js-menu-overlay mt-8 lg:mt-0">
<ul class="overflow-y-auto lg:bg-transparent lg:h-full lg:flex lg:items-center lg:overflow-visible">
<li class="js-menu-item lg:pr-6 xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-center group ">
<a class="h-full relative py-3 px-6 flex flex-1 items-center transition duration-150 text-3xl lg:text-lg font-medium text-bravo-800 lg:p-0 lg:bg-gradient-to-r lg:bg-bravo-900-to-r lg:from-bravo-900 lg:to-bravo-900 lg:bg-[length:0%_1px] lg:bg-[position:0_1.1em] lg:bg-left-bottom lg:bg-no-repeat lg:hover:bg-[length:100%_2px] lg:transition-[background-size,background-position] lg:duration-500 lg:ease-in-out lg:group-hover:text-bravo-900 lg:after:opacity-0 " href="./about-us.html">
About BIR
<div class="h-3 w-3 hidden lg:block">
<svg class="ml-2 w-full h-full fill-current text-bravo-900 transition duration-500 ease-in-out group-hover:rotate-180" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
<button class="js-mobile-second-level-trigger-forward transition lg:hidden py-0.5 my-2.5 px-4 border-l border-bravo-200" aria-expanded="false" aria-controls="mega-menu-1" aria-haspopup="true">
<span class="sr-only">
Open Second Level
</span>
<div class="h-6 w-6">
<svg class="w-full h-full fill-current text-alpha-700 transform" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</button>
<div id="second-level-menu-about-bir" class="js-second-level-panel invisible lg:visible z-50 transition-transform duration-300 absolute translate-x-full w-full h-full top-0 lg:top-full left-0 lg:pt-7 lg:overflow-y-visible lg:h-auto lg:-translate-y-7 lg:opacity-0 lg:-translate-x-full lg:transition-none lg:z-40 group-hover:opacity-100 lg:group-hover:translate-x-0 lg:focus-within:opacity-100 lg:focus-within:translate-x-0">
<div class="overflow-y-auto lg:overflow-visible h-full bg-white lg:bg-grey-100">
<div class="h-full lg:h-auto z-20 lg:relative lg:shadow-top-light">
<div class="h-full lg:h-auto lg:container lg:pt-6 lg:pb-11 lg:group-hover:animate-fadeQuick">
<button class="js-mobile-second-level-trigger-back w-full lg:hidden px-6 py-4 flex items-center text-bravo-900 border-bravo-200 border-b mb-8" aria-controls="second-level-menu-about-bir" aria-expanded="false" aria-controls="second-level-menu-about-bir">
<div class="w-4 h-4 mr-4">
<svg class="w-full h-full fill-current text-bravo-900 transform rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
<span class="font-medium text-3xl text-bravo-900 lg:hidden">
About BIR
</span>
</button>
<div class="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12">
<div class="lg:col-span-3 mb-5">
<ul>
<li>
<h2 class="text-1xl lg:text-xl flex font-heading font-medium lg:font-bold leading-tight lg:block text-bravo-900 lg:mb-3">
<span class="flex-1 py-2 px-6 lg:p-0 text-2xl lg:text-xl lg:block">About BIR</span>
</h2>
<div class="overflow-y-auto lg:overflow-visible h-full w-full">
<div class="lg:flex lg:space-x-8">
<ul class="lg:flex-1">
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">For patients</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Prizes, awards and bursaries</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Special interest groups</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">World Partner Network</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./join-us.html">
<div class="mb-4">
<picture class="block overflow-hidden rounded-xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-9@1200w.jpg">
</picture>
</div>
<div>
<h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Join us</h2>
<p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
<div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
<div class="mb-4">
<picture class="block overflow-hidden rounded-xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-9@1200w.jpg">
</picture>
</div>
<div>
<h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Benefits</h2>
<p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
<div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
<div class="mb-4">
<picture class="block overflow-hidden rounded-xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example6@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example6@16-9@1200w.jpg">
</picture>
</div>
<div>
<h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Get involved</h2>
<p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="js-menu-item lg:pr-6 xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-center group ">
<a class="h-full relative py-3 px-6 flex flex-1 items-center transition duration-150 text-3xl lg:text-lg font-medium text-bravo-800 lg:p-0 lg:bg-gradient-to-r lg:bg-bravo-900-to-r lg:from-bravo-900 lg:to-bravo-900 lg:bg-[length:0%_1px] lg:bg-[position:0_1.1em] lg:bg-left-bottom lg:bg-no-repeat lg:hover:bg-[length:100%_2px] lg:transition-[background-size,background-position] lg:duration-500 lg:ease-in-out lg:group-hover:text-bravo-900 lg:after:opacity-0 " href="./.html">
Membership
<div class="h-3 w-3 hidden lg:block">
<svg class="ml-2 w-full h-full fill-current text-bravo-900 transition duration-500 ease-in-out group-hover:rotate-180" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
<button class="js-mobile-second-level-trigger-forward transition lg:hidden py-0.5 my-2.5 px-4 border-l border-bravo-200" aria-expanded="false" aria-controls="mega-menu-2" aria-haspopup="true">
<span class="sr-only">
Open Second Level
</span>
<div class="h-6 w-6">
<svg class="w-full h-full fill-current text-alpha-700 transform" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</button>
<div id="second-level-menu-membership" class="js-second-level-panel invisible lg:visible z-50 transition-transform duration-300 absolute translate-x-full w-full h-full top-0 lg:top-full left-0 lg:pt-7 lg:overflow-y-visible lg:h-auto lg:-translate-y-7 lg:opacity-0 lg:-translate-x-full lg:transition-none lg:z-40 group-hover:opacity-100 lg:group-hover:translate-x-0 lg:focus-within:opacity-100 lg:focus-within:translate-x-0">
<div class="overflow-y-auto lg:overflow-visible h-full bg-white lg:bg-grey-100">
<div class="h-full lg:h-auto z-20 lg:relative lg:shadow-top-light">
<div class="h-full lg:h-auto lg:container lg:pt-6 lg:pb-11 lg:group-hover:animate-fadeQuick">
<button class="js-mobile-second-level-trigger-back w-full lg:hidden px-6 py-4 flex items-center text-bravo-900 border-bravo-200 border-b mb-8" aria-controls="second-level-menu-membership" aria-expanded="false" aria-controls="second-level-menu-membership">
<div class="w-4 h-4 mr-4">
<svg class="w-full h-full fill-current text-bravo-900 transform rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
<span class="font-medium text-3xl text-bravo-900 lg:hidden">
Membership
</span>
</button>
<div class="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12">
<div class="lg:col-span-3 mb-5">
<ul>
<li>
<h2 class="text-1xl lg:text-xl flex font-heading font-medium lg:font-bold leading-tight lg:block text-bravo-900 lg:mb-3">
<span class="flex-1 py-2 px-6 lg:p-0 text-2xl lg:text-xl lg:block">Membership</span>
</h2>
<div class="overflow-y-auto lg:overflow-visible h-full w-full">
<div class="lg:flex lg:space-x-8">
<ul class="lg:flex-1">
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./join-us.html">Join us</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Benefits</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Corporate membership</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Meet our team</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">FAQs</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./join-us.html">
<div class="mb-4">
<picture class="block overflow-hidden rounded-xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-9@1200w.jpg">
</picture>
</div>
<div>
<h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Join us</h2>
<p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
<div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
<div class="mb-4">
<picture class="block overflow-hidden rounded-xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-9@1200w.jpg">
</picture>
</div>
<div>
<h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Benefits</h2>
<p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
<div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
<div class="mb-4">
<picture class="block overflow-hidden rounded-xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example6@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example6@16-9@1200w.jpg">
</picture>
</div>
<div>
<h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Get involved</h2>
<p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="js-menu-item lg:pr-6 xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-center group ">
<a class="h-full relative py-3 px-6 flex flex-1 items-center transition duration-150 text-3xl lg:text-lg font-medium text-bravo-800 lg:p-0 lg:bg-gradient-to-r lg:bg-bravo-900-to-r lg:from-bravo-900 lg:to-bravo-900 lg:bg-[length:0%_1px] lg:bg-[position:0_1.1em] lg:bg-left-bottom lg:bg-no-repeat lg:hover:bg-[length:100%_2px] lg:transition-[background-size,background-position] lg:duration-500 lg:ease-in-out lg:group-hover:text-bravo-900 lg:after:opacity-0 " href="./news.html">
Publishing
<div class="h-3 w-3 hidden lg:block">
<svg class="ml-2 w-full h-full fill-current text-bravo-900 transition duration-500 ease-in-out group-hover:rotate-180" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
<button class="js-mobile-second-level-trigger-forward transition lg:hidden py-0.5 my-2.5 px-4 border-l border-bravo-200" aria-expanded="false" aria-controls="mega-menu-3" aria-haspopup="true">
<span class="sr-only">
Open Second Level
</span>
<div class="h-6 w-6">
<svg class="w-full h-full fill-current text-alpha-700 transform" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</button>
<div id="second-level-menu-publishing" class="js-second-level-panel invisible lg:visible z-50 transition-transform duration-300 absolute translate-x-full w-full h-full top-0 lg:top-full left-0 lg:pt-7 lg:overflow-y-visible lg:h-auto lg:-translate-y-7 lg:opacity-0 lg:-translate-x-full lg:transition-none lg:z-40 group-hover:opacity-100 lg:group-hover:translate-x-0 lg:focus-within:opacity-100 lg:focus-within:translate-x-0">
<div class="overflow-y-auto lg:overflow-visible h-full bg-white lg:bg-grey-100">
<div class="h-full lg:h-auto z-20 lg:relative lg:shadow-top-light">
<div class="h-full lg:h-auto lg:container lg:pt-6 lg:pb-11 lg:group-hover:animate-fadeQuick">
<button class="js-mobile-second-level-trigger-back w-full lg:hidden px-6 py-4 flex items-center text-bravo-900 border-bravo-200 border-b mb-8" aria-controls="second-level-menu-publishing" aria-expanded="false" aria-controls="second-level-menu-publishing">
<div class="w-4 h-4 mr-4">
<svg class="w-full h-full fill-current text-bravo-900 transform rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
<span class="font-medium text-3xl text-bravo-900 lg:hidden">
Publishing
</span>
</button>
<div class="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12">
<div class="lg:col-span-3 mb-5">
<ul>
<li>
<h2 class="text-1xl lg:text-xl flex font-heading font-medium lg:font-bold leading-tight lg:block text-bravo-900 lg:mb-3">
<span class="flex-1 py-2 px-6 lg:p-0 text-2xl lg:text-xl lg:block">Publishing</span>
</h2>
<div class="overflow-y-auto lg:overflow-visible h-full w-full">
<div class="lg:flex lg:space-x-8">
<ul class="lg:flex-1">
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Journals</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Special publications</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Podcasts</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Authors/Submit</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Open access</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./join-us.html">
<div class="mb-4">
<picture class="block overflow-hidden rounded-xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-9@1200w.jpg">
</picture>
</div>
<div>
<h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Join us</h2>
<p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
<div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
<div class="mb-4">
<picture class="block overflow-hidden rounded-xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-9@1200w.jpg">
</picture>
</div>
<div>
<h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Benefits</h2>
<p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
<div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
<div class="mb-4">
<picture class="block overflow-hidden rounded-xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example6@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example6@16-9@1200w.jpg">
</picture>
</div>
<div>
<h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Get involved</h2>
<p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="js-menu-item lg:pr-6 xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-center group ">
<a class="h-full relative py-3 px-6 flex flex-1 items-center transition duration-150 text-3xl lg:text-lg font-medium text-bravo-800 lg:p-0 lg:bg-gradient-to-r lg:bg-bravo-900-to-r lg:from-bravo-900 lg:to-bravo-900 lg:bg-[length:0%_1px] lg:bg-[position:0_1.1em] lg:bg-left-bottom lg:bg-no-repeat lg:hover:bg-[length:100%_2px] lg:transition-[background-size,background-position] lg:duration-500 lg:ease-in-out lg:group-hover:text-bravo-900 lg:after:opacity-0 " href="./education-&-events.html">
Education & events
<div class="h-3 w-3 hidden lg:block">
<svg class="ml-2 w-full h-full fill-current text-bravo-900 transition duration-500 ease-in-out group-hover:rotate-180" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
<button class="js-mobile-second-level-trigger-forward transition lg:hidden py-0.5 my-2.5 px-4 border-l border-bravo-200" aria-expanded="false" aria-controls="mega-menu-4" aria-haspopup="true">
<span class="sr-only">
Open Second Level
</span>
<div class="h-6 w-6">
<svg class="w-full h-full fill-current text-alpha-700 transform" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</button>
<div id="second-level-menu-education-&-events" class="js-second-level-panel invisible lg:visible z-50 transition-transform duration-300 absolute translate-x-full w-full h-full top-0 lg:top-full left-0 lg:pt-7 lg:overflow-y-visible lg:h-auto lg:-translate-y-7 lg:opacity-0 lg:-translate-x-full lg:transition-none lg:z-40 group-hover:opacity-100 lg:group-hover:translate-x-0 lg:focus-within:opacity-100 lg:focus-within:translate-x-0">
<div class="overflow-y-auto lg:overflow-visible h-full bg-white lg:bg-grey-100">
<div class="h-full lg:h-auto z-20 lg:relative lg:shadow-top-light">
<div class="h-full lg:h-auto lg:container lg:pt-6 lg:pb-11 lg:group-hover:animate-fadeQuick">
<button class="js-mobile-second-level-trigger-back w-full lg:hidden px-6 py-4 flex items-center text-bravo-900 border-bravo-200 border-b mb-8" aria-controls="second-level-menu-education-&-events" aria-expanded="false" aria-controls="second-level-menu-education-&-events">
<div class="w-4 h-4 mr-4">
<svg class="w-full h-full fill-current text-bravo-900 transform rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
<span class="font-medium text-3xl text-bravo-900 lg:hidden">
Education & events
</span>
</button>
<div class="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12">
<div class="lg:col-span-3 mb-5">
<ul>
<li>
<h2 class="text-1xl lg:text-xl flex font-heading font-medium lg:font-bold leading-tight lg:block text-bravo-900 lg:mb-3">
<span class="flex-1 py-2 px-6 lg:p-0 text-2xl lg:text-xl lg:block">Education & events</span>
</h2>
<div class="overflow-y-auto lg:overflow-visible h-full w-full">
<div class="lg:flex lg:space-x-8">
<ul class="lg:flex-1">
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Upcoming events</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">BIR video courses</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">AI Essentials webinar series</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">PET- CT webinar series</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Therapy webinar series</a>
</li>
<li class="lg:mb-2">
<a class="text-1xl lg:text-lg font-heading block lg:inline-block px-6 py-2 lg:p-0 xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 font-medium text-bravo-900 lg:hover:underline" href="./index.html">Webinar and virtual events FAQs</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./join-us.html">
<div class="mb-4">
<picture class="block overflow-hidden rounded-xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-9@1200w.jpg">
</picture>
</div>
<div>
<h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Join us</h2>
<p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
<div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
<div class="mb-4">
<picture class="block overflow-hidden rounded-xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-9@1200w.jpg">
</picture>
</div>
<div>
<h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Benefits</h2>
<p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
<div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
<div class="mb-4">
<picture class="block overflow-hidden rounded-xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example6@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example6@16-9@1200w.jpg">
</picture>
</div>
<div>
<h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Get involved</h2>
<p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="js-menu-item lg:pr-6 xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-center group ">
<a class="h-full relative py-3 px-6 flex flex-1 items-center transition duration-150 text-3xl lg:text-lg font-medium text-bravo-800 lg:p-0 lg:bg-gradient-to-r lg:bg-bravo-900-to-r lg:from-bravo-900 lg:to-bravo-900 lg:bg-[length:0%_1px] lg:bg-[position:0_1.1em] lg:bg-left-bottom lg:bg-no-repeat lg:hover:bg-[length:100%_2px] lg:transition-[background-size,background-position] lg:duration-500 lg:ease-in-out lg:group-hover:text-bravo-900 lg:after:opacity-0 " href="./news.html">
News
</a>
</li>
</ul>
<div class="lg:hidden px-6">
<ul class="pt-5 mt-8 border-t border-bravo-200">
<li>
<a class="flex my-4 text-1xl text-bravo-900 font-heading font-medium" href="./join-us.html">
Join us
<div class="w-6 h-6 ml-3">
<svg class="w-full h-full fill-current text-alpha-700" aria-hidden="true">
<use href="/front-end/sprite.svg#"></use>
</svg>
</div>
</a>
</li>
</ul>
<a href="" class="sm:max-w-64 flex justify-center leading-none items-center relative z-0 font-heading font-medium text-lg align-middle py-3 px-8 no-underline rounded-lg transition duration-500 ease-in-out 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">
Login
</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">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="search-modal" aria-hidden="true" data-vanilla-module="Modal">
<div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
<div class="js-model-content w-full md:max-w-screen-md m-auto" role="dialog" aria-modal="true">
<div class="flex justify-end pb-4">
<button class="w-10 h-10 border-white group transition ease-in-out duration-300 hover:bg-white border rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
<svg class="fill-current w-5 h-5 text-white group-hover:text-bravo-900 pointer-events-none">
<use href="/front-end/sprite.svg#icon-close"></use>
</svg>
<span class="sr-only">Close Search Modal</span>
</button>
</div>
<div class="js-model-content flex flex-col items-center justify-center z-10 relative bg-white p-8 shadow-xl w-full rounded-2xl" role="dialog" aria-modal="true">
<main class="w-full">
<form action="./search-results.html" class="pb-2">
<label class="block text-center text-4xl mb-2 text-bravo-900" for="modalSearchTerm">Search</label>
<div class="flex justify-center w-full items-stretch">
<div class="flex-1 mr-4">
<input class="block w-full rounded-lg border-grey-400 shadow-sm default-focus focus-within:ring-black" id="modalSearchTerm" name="searchTerm" placeholder="Search term" type="text" value="">
</div>
<button>
<span class="sr-only">Search site</span>
<div class="w-6 h-6">
<svg class="fill-current w-full h-full text-bravo-900 transition-colors ease-in-out duration-300 hover:text-bravo-900">
<use href="/front-end/sprite.svg#icon-search"></use>
</svg>
</div>
</button>
</div>
</form>
</main>
</div>
</div>
</div>
</div>
<div id="main-content" class="js-main-content relative flex-grow z-[5]">
</div>
<footer class="text-white relative z-0 grid grid-rows-1 grid-cols-1 flex-shrink-0 flex-grow-0">
<div class="absolute w-full h-full top-0 left-0 gradient-dark z-0 rotate-180"></div>
<div class="absolute w-full h-full top-0 left-0 bg-bravo-900 opacity-50 z-10"></div>
<div class="footer container md:grid md:grid-cols-12 md:auto-rows-auto py-13 lg:py-20 h-full gap-x-6 relative z-20 row-start-1 row-end-2 col-start-1 col-end-2">
<div class="mb-6 row-start-1 row-end-2 md:col-start-1 md:col-end-9">
<a href="./index.html" class="flex items-center lg:block w-72 lg:w-auto">
<img src="/front-end/images/footer_logo.svg" class="" alt="British Institute of Radiology" width="300" height="85" />
</a>
</div>
<div class="mb-6 md:row-start-2 md:row-end-3 md:col-start-1 md:col-end-6 lg:row-start-1 lg:row-end-2 lg:col-start-7 lg:col-end-10 xl:col-start-9 xl:col-end-11">
<p class="font-heading font-bold pb-3 text-lg md:text-xl">How can we help?</p>
<ul class="">
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./about-us.html">Contact</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./.html">Membership</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./.html">For Patients</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./.html">Jobs in Radiology</a>
</li>
</ul>
</div>
<div class="mb-6 md:row-start-2 md:row-end-3 md:col-start-6 md:col-end-13 lg:row-start-1 lg:row-end-2 lg:col-start-10 lg:col-end-13 xl:col-start-11 xl:col-end-13">
<p class="font-heading font-bold pb-3 text-lg md:text-xl">Terms & policies</p>
<ul class="">
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./about-us.html">Cookies</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./.html">Terms & conditions</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./.html">Equality and diversity</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./.html">Privacy policy</a>
</li>
</ul>
</div>
<div class="mt-16 md:row-start-3 md:row-end-4 lg:row-start-2 lg:row-end-3 md:col-start-1 md:col-end-13 flex flex-col md:flex-row justify-between gap-6">
<div class="flex flex-col justify-end gap-3">
<p>Copyright © British Institute of Radiology 2026</p>
<p>Registered Charity Number: 215869</p>
</div>
<div class="flex flex-col md:items-end gap-4">
<div class="flex gap-3 flex-wrap md:justify-center l">
<div>
<a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 border border-white group hover:bg-white" href="./.html">
<div class="relative flex justify-center items-center transition ease-in duration-200">
<div class="w-5 h-5">
<svg class="w-full h-full fill-current text-white group-hover:text-bravo-900" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-facebook"></use>
</svg>
</div>
</div>
<span class="sr-only">Open Facebook (opens in new window)</span>
</a>
</div>
<div>
<a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 border border-white group hover:bg-white" href="./.html">
<div class="relative flex justify-center items-center transition ease-in duration-200">
<div class="w-5 h-5">
<svg class="w-full h-full fill-current text-white group-hover:text-bravo-900" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-twitter"></use>
</svg>
</div>
</div>
<span class="sr-only">Open Twitter (opens in new window)</span>
</a>
</div>
<div>
<a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 border border-white group hover:bg-white" href="./.html">
<div class="relative flex justify-center items-center transition ease-in duration-200">
<div class="w-5 h-5">
<svg class="w-full h-full fill-current text-white group-hover:text-bravo-900" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-linkedin"></use>
</svg>
</div>
</div>
<span class="sr-only">Open LinkedIn (opens in new window)</span>
</a>
</div>
<div>
<a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 border border-white group hover:bg-white" href="./.html">
<div class="relative flex justify-center items-center transition ease-in duration-200">
<div class="w-5 h-5">
<svg class="w-full h-full fill-current text-white group-hover:text-bravo-900" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-instagram"></use>
</svg>
</div>
</div>
<span class="sr-only">Open Instagram (opens in new window)</span>
</a>
</div>
</div>
<div class="">
<p>Site by <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" target="blank" href="https://www.mentordigital.co.uk">Mentor Digital</a></p>
</div>
</div>
</div>
</div>
</footer>
<div data-vanilla-module="Overlay" class="hidden fixed z-10 inset-0 w-full h-screen bg-black opacity-50"></div>
</body>
</html>
<!DOCTYPE html>
<html class="min-h-full" lang="en-GB">
<head>
<title>{{ siteName }}</title>
{% render "@meta" %}
{% render "@js" %}
{% render "@css" %}
</head>
<body class="font-body flex flex-col min-h-screen text-bravo-900 overflow-x-hidden">
<a href="#main-content" class="focus:block sr-only focus:not-sr-only focus:z-50 focus:bg-alpha focus:p-4 focus:border-2 focus:border-white focus:text-white focus:absolute focus:top-2 focus:left-2 focus:shadow-sm">
Skip to content
</a>
{% render "@global-header", { title: siteName, pageTitle: _target.context.pageName, navItems: navItems, quickLinks: quickLinks, dropDownButtons: dropDownButtons } %}
<div id="main-content" class="js-main-content relative flex-grow z-[5]">
{{ yield | safe }}
</div>
{% render "@global-footer" %}
<div data-vanilla-module="Overlay" class="hidden fixed z-10 inset-0 w-full h-screen bg-black opacity-50"></div>
</body>
</html>
{
"siteName": "BIR Pattern Library",
"quickLinks": [
{
"name": "Join us",
"url": "./join-us"
}
],
"navItems": [
{
"menu_item": "About BIR",
"url": "./about-us",
"megaList": [
{
"component": "mega-secondary-list",
"data": {
"colHeading": "About BIR",
"columns": [
{
"list": [
{
"url": "./index",
"name": "For patients"
},
{
"url": "./index",
"name": "Prizes, awards and bursaries"
},
{
"url": "./index",
"name": "Special interest groups"
},
{
"url": "./index",
"name": "World Partner Network"
}
]
}
]
}
},
{
"component": "mega-card",
"data": {
"colHeading": "",
"url": "./join-us",
"heading": "Join us",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example1@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example1@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
},
{
"component": "mega-card",
"data": {
"colHeading": "",
"url": "./index",
"heading": "Benefits",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example4@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example4@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
},
{
"component": "mega-card",
"data": {
"colHeading": "",
"url": "./index",
"heading": "Get involved",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example6@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example6@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
}
]
},
{
"menu_item": "Membership",
"url": "./",
"megaList": [
{
"component": "mega-secondary-list",
"data": {
"colHeading": "Membership",
"columns": [
{
"list": [
{
"url": "./join-us",
"name": "Join us"
},
{
"url": "./index",
"name": "Benefits"
},
{
"url": "./index",
"name": "Corporate membership"
},
{
"url": "./index",
"name": "Meet our team"
},
{
"url": "./index",
"name": "FAQs"
}
]
}
]
}
},
{
"component": "mega-card",
"data": {
"colHeading": "",
"url": "./join-us",
"heading": "Join us",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example1@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example1@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
},
{
"component": "mega-card",
"data": {
"colHeading": "",
"url": "./index",
"heading": "Benefits",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example4@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example4@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
},
{
"component": "mega-card",
"data": {
"colHeading": "",
"url": "./index",
"heading": "Get involved",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example6@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example6@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
}
]
},
{
"menu_item": "Publishing",
"url": "./news",
"megaList": [
{
"component": "mega-secondary-list",
"data": {
"colHeading": "Publishing",
"columns": [
{
"list": [
{
"url": "./index",
"name": "Journals"
},
{
"url": "./index",
"name": "Special publications"
},
{
"url": "./index",
"name": "Podcasts"
},
{
"url": "./index",
"name": "Authors/Submit"
},
{
"url": "./index",
"name": "Open access"
}
]
}
]
}
},
{
"component": "mega-card",
"data": {
"colHeading": "",
"url": "./join-us",
"heading": "Join us",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example1@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example1@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
},
{
"component": "mega-card",
"data": {
"colHeading": "",
"url": "./index",
"heading": "Benefits",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example4@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example4@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
},
{
"component": "mega-card",
"data": {
"colHeading": "",
"url": "./index",
"heading": "Get involved",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example6@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example6@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
}
]
},
{
"menu_item": "Education & events",
"url": "./education-&-events",
"megaList": [
{
"component": "mega-secondary-list",
"data": {
"colHeading": "Education & events",
"columns": [
{
"list": [
{
"url": "./index",
"name": "Upcoming events"
},
{
"url": "./index",
"name": "BIR video courses"
},
{
"url": "./index",
"name": "AI Essentials webinar series"
},
{
"url": "./index",
"name": "PET- CT webinar series"
},
{
"url": "./index",
"name": "Therapy webinar series"
},
{
"url": "./index",
"name": "Webinar and virtual events FAQs"
}
]
}
]
}
},
{
"component": "mega-card",
"data": {
"colHeading": "",
"url": "./join-us",
"heading": "Join us",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example1@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example1@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
},
{
"component": "mega-card",
"data": {
"colHeading": "",
"url": "./index",
"heading": "Benefits",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example4@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example4@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
},
{
"component": "mega-card",
"data": {
"colHeading": "",
"url": "./index",
"heading": "Get involved",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example6@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example6@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
}
]
},
{
"menu_item": "News",
"url": "./news"
}
]
}
No notes defined.