<div class="call-to-action call-to-action--jumbo
" data-cy="call-to-action">
<h2 class="call-to-action__lead-in-text" data-cy="call-to-action__lead-in-text">
Interested in learning more?
</h2>
<ul class="call-to-action__link-list" data-cy="call-to-action__link-list" data-is-jumbo="true">
<div class="link-with-icon ">
<a class="link-with-icon__link" href="#">
<span class="link-with-icon__icon">
<div class="color-circle-icon color-circle-icon--orange color-circle-icon--big">
<span class="color-circle-icon__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
<g id="edit">
<mask id="mask0_4758_22510" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<rect id="Bounding box" width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4758_22510)">
<path id="edit_2" d="M3.33333 12.6668H4.26667L10.0167 6.91683L9.08333 5.9835L3.33333 11.7335V12.6668ZM12.8667 5.95016L10.0333 3.15016L10.9667 2.21683C11.2222 1.96127 11.5361 1.8335 11.9083 1.8335C12.2806 1.8335 12.5944 1.96127 12.85 2.21683L13.7833 3.15016C14.0389 3.40572 14.1722 3.71405 14.1833 4.07516C14.1944 4.43627 14.0722 4.74461 13.8167 5.00016L12.8667 5.95016ZM11.9 6.9335L4.83333 14.0002H2V11.1668L9.06667 4.10016L11.9 6.9335Z" fill="white" />
</g>
</g>
</svg>
</span>
</div>
</span>
<span class="link-with-icon__text">
Apply now
</span>
</a>
</div>
<div class="link-with-icon ">
<a class="link-with-icon__link" href="#">
<span class="link-with-icon__icon">
<div class="color-circle-icon color-circle-icon--orange color-circle-icon--big">
<span class="color-circle-icon__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
<g id="chat">
<mask id="mask0_4758_37148" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<rect id="Bounding box" width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4758_37148)">
<path id="chat_2" d="M3.99967 9.3335H9.33301V8.00016H3.99967V9.3335ZM3.99967 7.3335H11.9997V6.00016H3.99967V7.3335ZM3.99967 5.3335H11.9997V4.00016H3.99967V5.3335ZM1.33301 14.6668V2.66683C1.33301 2.30016 1.46356 1.98627 1.72467 1.72516C1.98579 1.46405 2.29967 1.3335 2.66634 1.3335H13.333C13.6997 1.3335 14.0136 1.46405 14.2747 1.72516C14.5358 1.98627 14.6663 2.30016 14.6663 2.66683V10.6668C14.6663 11.0335 14.5358 11.3474 14.2747 11.6085C14.0136 11.8696 13.6997 12.0002 13.333 12.0002H3.99967L1.33301 14.6668ZM3.43301 10.6668H13.333V2.66683H2.66634V11.4168L3.43301 10.6668Z" fill="white" />
</g>
</g>
</svg>
</span>
</div>
</span>
<span class="link-with-icon__text">
Contact us
</span>
</a>
</div>
<div class="link-with-icon ">
<a class="link-with-icon__link" href="#">
<span class="link-with-icon__icon">
<div class="color-circle-icon color-circle-icon--orange color-circle-icon--big">
<span class="color-circle-icon__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
<g id="calendar_month">
<mask id="mask0_4758_12863" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<rect id="Bounding box" width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4758_12863)">
<path id="calendar_month_2" d="M3.33333 14.6668C2.96667 14.6668 2.65278 14.5363 2.39167 14.2752C2.13056 14.0141 2 13.7002 2 13.3335V4.00016C2 3.6335 2.13056 3.31961 2.39167 3.0585C2.65278 2.79739 2.96667 2.66683 3.33333 2.66683H4V1.3335H5.33333V2.66683H10.6667V1.3335H12V2.66683H12.6667C13.0333 2.66683 13.3472 2.79739 13.6083 3.0585C13.8694 3.31961 14 3.6335 14 4.00016V13.3335C14 13.7002 13.8694 14.0141 13.6083 14.2752C13.3472 14.5363 13.0333 14.6668 12.6667 14.6668H3.33333ZM3.33333 13.3335H12.6667V6.66683H3.33333V13.3335ZM3.33333 5.3335H12.6667V4.00016H3.33333V5.3335ZM8 9.3335C7.81111 9.3335 7.65278 9.26961 7.525 9.14183C7.39722 9.01405 7.33333 8.85572 7.33333 8.66683C7.33333 8.47794 7.39722 8.31961 7.525 8.19183C7.65278 8.06405 7.81111 8.00016 8 8.00016C8.18889 8.00016 8.34722 8.06405 8.475 8.19183C8.60278 8.31961 8.66667 8.47794 8.66667 8.66683C8.66667 8.85572 8.60278 9.01405 8.475 9.14183C8.34722 9.26961 8.18889 9.3335 8 9.3335ZM5.33333 9.3335C5.14444 9.3335 4.98611 9.26961 4.85833 9.14183C4.73056 9.01405 4.66667 8.85572 4.66667 8.66683C4.66667 8.47794 4.73056 8.31961 4.85833 8.19183C4.98611 8.06405 5.14444 8.00016 5.33333 8.00016C5.52222 8.00016 5.68056 8.06405 5.80833 8.19183C5.93611 8.31961 6 8.47794 6 8.66683C6 8.85572 5.93611 9.01405 5.80833 9.14183C5.68056 9.26961 5.52222 9.3335 5.33333 9.3335ZM10.6667 9.3335C10.4778 9.3335 10.3194 9.26961 10.1917 9.14183C10.0639 9.01405 10 8.85572 10 8.66683C10 8.47794 10.0639 8.31961 10.1917 8.19183C10.3194 8.06405 10.4778 8.00016 10.6667 8.00016C10.8556 8.00016 11.0139 8.06405 11.1417 8.19183C11.2694 8.31961 11.3333 8.47794 11.3333 8.66683C11.3333 8.85572 11.2694 9.01405 11.1417 9.14183C11.0139 9.26961 10.8556 9.3335 10.6667 9.3335ZM8 12.0002C7.81111 12.0002 7.65278 11.9363 7.525 11.8085C7.39722 11.6807 7.33333 11.5224 7.33333 11.3335C7.33333 11.1446 7.39722 10.9863 7.525 10.8585C7.65278 10.7307 7.81111 10.6668 8 10.6668C8.18889 10.6668 8.34722 10.7307 8.475 10.8585C8.60278 10.9863 8.66667 11.1446 8.66667 11.3335C8.66667 11.5224 8.60278 11.6807 8.475 11.8085C8.34722 11.9363 8.18889 12.0002 8 12.0002ZM5.33333 12.0002C5.14444 12.0002 4.98611 11.9363 4.85833 11.8085C4.73056 11.6807 4.66667 11.5224 4.66667 11.3335C4.66667 11.1446 4.73056 10.9863 4.85833 10.8585C4.98611 10.7307 5.14444 10.6668 5.33333 10.6668C5.52222 10.6668 5.68056 10.7307 5.80833 10.8585C5.93611 10.9863 6 11.1446 6 11.3335C6 11.5224 5.93611 11.6807 5.80833 11.8085C5.68056 11.9363 5.52222 12.0002 5.33333 12.0002ZM10.6667 12.0002C10.4778 12.0002 10.3194 11.9363 10.1917 11.8085C10.0639 11.6807 10 11.5224 10 11.3335C10 11.1446 10.0639 10.9863 10.1917 10.8585C10.3194 10.7307 10.4778 10.6668 10.6667 10.6668C10.8556 10.6668 11.0139 10.7307 11.1417 10.8585C11.2694 10.9863 11.3333 11.1446 11.3333 11.3335C11.3333 11.5224 11.2694 11.6807 11.1417 11.8085C11.0139 11.9363 10.8556 12.0002 10.6667 12.0002Z" fill="white" />
</g>
</g>
</svg>
</span>
</div>
</span>
<span class="link-with-icon__text">
Upcoming events
</span>
</a>
</div>
<div class="link-with-icon ">
<a class="link-with-icon__link" href="#">
<span class="link-with-icon__icon">
<div class="color-circle-icon color-circle-icon--orange color-circle-icon--big">
<span class="color-circle-icon__icon">
<svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="_mark icon-right-chevron__shape" fill-rule="evenodd" clip-rule="evenodd" d="M0.400059 0.200059C0.841887 -0.131312 1.46869 -0.041769 1.80006 0.400059L6.00006 6.00006L1.80006 11.6001C1.46869 12.0419 0.841887 12.1314 0.400059 11.8001C-0.0417684 11.4687 -0.131312 10.8419 0.200059 10.4001L3.50006 6.00006L0.200059 1.60006C-0.131312 1.15823 -0.0417684 0.53143 0.400059 0.200059Z" fill="black" />
</svg>
</span>
</div>
</span>
<span class="link-with-icon__text">
Find out more
</span>
</a>
</div>
<div class="link-with-icon ">
<a class="link-with-icon__link" href="#">
<span class="link-with-icon__icon">
<div class="color-circle-icon color-circle-icon--orange color-circle-icon--big">
<span class="color-circle-icon__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
<g id="boy">
<mask id="mask0_4758_32906" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<rect id="Bounding box" width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4758_32906)">
<path id="boy_2" d="M8 4.99984C7.67778 4.99984 7.40278 4.88595 7.175 4.65817C6.94722 4.43039 6.83333 4.15539 6.83333 3.83317C6.83333 3.51095 6.94722 3.23595 7.175 3.00817C7.40278 2.78039 7.67778 2.6665 8 2.6665C8.32222 2.6665 8.59722 2.78039 8.825 3.00817C9.05278 3.23595 9.16667 3.51095 9.16667 3.83317C9.16667 4.15539 9.05278 4.43039 8.825 4.65817C8.59722 4.88595 8.32222 4.99984 8 4.99984ZM6.66667 13.3332V9.99984H6V6.99984C6 6.63317 6.13056 6.31928 6.39167 6.05817C6.65278 5.79706 6.96667 5.6665 7.33333 5.6665H8.66667C9.03333 5.6665 9.34722 5.79706 9.60833 6.05817C9.86944 6.31928 10 6.63317 10 6.99984V9.99984H9.33333V13.3332H6.66667Z" fill="white" />
</g>
</g>
</svg>
</span>
</div>
</span>
<span class="link-with-icon__text">
Read the bio
</span>
</a>
</div>
<div class="link-with-icon ">
<a class="link-with-icon__link" href="#">
<span class="link-with-icon__icon">
<div class="color-circle-icon color-circle-icon--orange color-circle-icon--big">
<span class="color-circle-icon__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
<g id="help">
<mask id="mask0_4758_3608" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<rect id="Bounding box" width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4758_3608)">
<path id="help_2" d="M7.96634 12.0002C8.19967 12.0002 8.3969 11.9196 8.55801 11.7585C8.71912 11.5974 8.79967 11.4002 8.79967 11.1668C8.79967 10.9335 8.71912 10.7363 8.55801 10.5752C8.3969 10.4141 8.19967 10.3335 7.96634 10.3335C7.73301 10.3335 7.53579 10.4141 7.37467 10.5752C7.21356 10.7363 7.13301 10.9335 7.13301 11.1668C7.13301 11.4002 7.21356 11.5974 7.37467 11.7585C7.53579 11.9196 7.73301 12.0002 7.96634 12.0002ZM7.36634 9.4335H8.59968C8.59968 9.06683 8.64134 8.77794 8.72468 8.56683C8.80801 8.35572 9.04412 8.06683 9.43301 7.70016C9.7219 7.41127 9.94967 7.13627 10.1163 6.87516C10.283 6.61405 10.3663 6.30016 10.3663 5.9335C10.3663 5.31127 10.1386 4.8335 9.68301 4.50016C9.22745 4.16683 8.68856 4.00016 8.06634 4.00016C7.43301 4.00016 6.91912 4.16683 6.52467 4.50016C6.13023 4.8335 5.85523 5.2335 5.69967 5.70016L6.79967 6.1335C6.85523 5.9335 6.98023 5.71683 7.17467 5.4835C7.36912 5.25016 7.66634 5.1335 8.06634 5.1335C8.4219 5.1335 8.68856 5.23072 8.86634 5.42516C9.04412 5.61961 9.13301 5.8335 9.13301 6.06683C9.13301 6.28905 9.06634 6.49739 8.93301 6.69183C8.79967 6.88627 8.63301 7.06683 8.43301 7.2335C7.94412 7.66683 7.64412 7.99461 7.53301 8.21683C7.4219 8.43905 7.36634 8.84461 7.36634 9.4335ZM7.99967 14.6668C7.07745 14.6668 6.21079 14.4918 5.39967 14.1418C4.58856 13.7918 3.88301 13.3168 3.28301 12.7168C2.68301 12.1168 2.20801 11.4113 1.85801 10.6002C1.50801 9.78905 1.33301 8.92239 1.33301 8.00016C1.33301 7.07794 1.50801 6.21127 1.85801 5.40016C2.20801 4.58905 2.68301 3.8835 3.28301 3.2835C3.88301 2.6835 4.58856 2.2085 5.39967 1.8585C6.21079 1.5085 7.07745 1.3335 7.99967 1.3335C8.9219 1.3335 9.78856 1.5085 10.5997 1.8585C11.4108 2.2085 12.1163 2.6835 12.7163 3.2835C13.3163 3.8835 13.7913 4.58905 14.1413 5.40016C14.4913 6.21127 14.6663 7.07794 14.6663 8.00016C14.6663 8.92239 14.4913 9.78905 14.1413 10.6002C13.7913 11.4113 13.3163 12.1168 12.7163 12.7168C12.1163 13.3168 11.4108 13.7918 10.5997 14.1418C9.78856 14.4918 8.9219 14.6668 7.99967 14.6668ZM7.99967 13.3335C9.48856 13.3335 10.7497 12.8168 11.783 11.7835C12.8163 10.7502 13.333 9.48905 13.333 8.00016C13.333 6.51127 12.8163 5.25016 11.783 4.21683C10.7497 3.1835 9.48856 2.66683 7.99967 2.66683C6.51079 2.66683 5.24967 3.1835 4.21634 4.21683C3.18301 5.25016 2.66634 6.51127 2.66634 8.00016C2.66634 9.48905 3.18301 10.7502 4.21634 11.7835C5.24967 12.8168 6.51079 13.3335 7.99967 13.3335Z" fill="white" />
</g>
</g>
</svg>
</span>
</div>
</span>
<span class="link-with-icon__text">
Ask a question
</span>
</a>
</div>
<div class="link-with-icon ">
<a class="link-with-icon__link" href="#">
<span class="link-with-icon__icon">
<div class="color-circle-icon color-circle-icon--orange color-circle-icon--big">
<span class="color-circle-icon__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
<g id="location_on">
<mask id="mask0_4758_35610" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<rect id="Bounding box" width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4758_35610)">
<path id="location_on_2" d="M8.00033 8.00016C8.36699 8.00016 8.68088 7.86961 8.94199 7.6085C9.2031 7.34739 9.33366 7.0335 9.33366 6.66683C9.33366 6.30016 9.2031 5.98627 8.94199 5.72516C8.68088 5.46405 8.36699 5.3335 8.00033 5.3335C7.63366 5.3335 7.31977 5.46405 7.05866 5.72516C6.79755 5.98627 6.66699 6.30016 6.66699 6.66683C6.66699 7.0335 6.79755 7.34739 7.05866 7.6085C7.31977 7.86961 7.63366 8.00016 8.00033 8.00016ZM8.00033 12.9002C9.35588 11.6557 10.3614 10.5252 11.017 9.5085C11.6725 8.49183 12.0003 7.58905 12.0003 6.80016C12.0003 5.58905 11.6142 4.59738 10.842 3.82516C10.0698 3.05294 9.12255 2.66683 8.00033 2.66683C6.8781 2.66683 5.93088 3.05294 5.15866 3.82516C4.38644 4.59738 4.00033 5.58905 4.00033 6.80016C4.00033 7.58905 4.3281 8.49183 4.98366 9.5085C5.63921 10.5252 6.64477 11.6557 8.00033 12.9002ZM8.00033 14.6668C6.21144 13.1446 4.87533 11.7307 3.99199 10.4252C3.10866 9.11961 2.66699 7.91127 2.66699 6.80016C2.66699 5.1335 3.2031 3.80572 4.27533 2.81683C5.34755 1.82794 6.58921 1.3335 8.00033 1.3335C9.41144 1.3335 10.6531 1.82794 11.7253 2.81683C12.7975 3.80572 13.3337 5.1335 13.3337 6.80016C13.3337 7.91127 12.892 9.11961 12.0087 10.4252C11.1253 11.7307 9.78921 13.1446 8.00033 14.6668Z" fill="white" />
</g>
</g>
</svg>
</span>
</div>
</span>
<span class="link-with-icon__text">
See your location
</span>
</a>
</div>
<div class="link-with-icon ">
<a class="link-with-icon__link" href="#">
<span class="link-with-icon__icon">
<div class="color-circle-icon color-circle-icon--orange color-circle-icon--big">
<span class="color-circle-icon__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
<g id="link">
<mask id="mask0_4758_22463" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<rect id="Bounding box" width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4758_22463)">
<path id="link_2" d="M7.33301 11.3332H4.66634C3.74412 11.3332 2.95801 11.0082 2.30801 10.3582C1.65801 9.70817 1.33301 8.92206 1.33301 7.99984C1.33301 7.07761 1.65801 6.2915 2.30801 5.6415C2.95801 4.9915 3.74412 4.6665 4.66634 4.6665H7.33301V5.99984H4.66634C4.11079 5.99984 3.63856 6.19428 3.24967 6.58317C2.86079 6.97206 2.66634 7.44428 2.66634 7.99984C2.66634 8.55539 2.86079 9.02761 3.24967 9.4165C3.63856 9.80539 4.11079 9.99984 4.66634 9.99984H7.33301V11.3332ZM5.33301 8.6665V7.33317H10.6663V8.6665H5.33301ZM8.66634 11.3332V9.99984H11.333C11.8886 9.99984 12.3608 9.80539 12.7497 9.4165C13.1386 9.02761 13.333 8.55539 13.333 7.99984C13.333 7.44428 13.1386 6.97206 12.7497 6.58317C12.3608 6.19428 11.8886 5.99984 11.333 5.99984H8.66634V4.6665H11.333C12.2552 4.6665 13.0413 4.9915 13.6913 5.6415C14.3413 6.2915 14.6663 7.07761 14.6663 7.99984C14.6663 8.92206 14.3413 9.70817 13.6913 10.3582C13.0413 11.0082 12.2552 11.3332 11.333 11.3332H8.66634Z" fill="white" />
</g>
</g>
</svg>
</span>
</div>
</span>
<span class="link-with-icon__text">
Visit the website
</span>
</a>
</div>
</ul>
</div>
<div class="call-to-action {{ fields.isJumbo ? 'call-to-action--jumbo' : '' }}
{{ background == 'dark' ? 'call-to-action--dark' : '' }}"
data-cy="call-to-action">
<h2 class="call-to-action__lead-in-text"
data-cy="call-to-action__lead-in-text">
{{ fields.leadInText }}
</h2>
{% if fields.isJumbo|default(false) %}
{% if fields.showDescription|default(false) %}
<p class="call-to-action__description"
data-cy="call-to-action__description"
{{ fields.description ? 'data-description="true"' : 'data-description="false"'}}>
{{ fields.description }}
</p>
{% endif %}
<ul class="call-to-action__link-list"
data-cy="call-to-action__link-list"
{{ fields.isJumbo ? 'data-is-jumbo="true"' : 'data-is-jumbo="false"'}}>
{{ content }}
{% for item in fields.innerBlocks.callToActionList %}
{% include 'blocks/link-with-icon/link-with-icon.twig' with item %}
{% endfor %}
</ul>
{% else %}
<div class="call-to-action__button" data-cy="call-to-action__button"
{{ fields.isJumbo ? 'data-is-jumbo="true"' : 'data-is-jumbo="false"'}}>
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: fields.linkText,
type: 'primary',
url: fields.linkReference,
},
background: 'light'
} %}
</div>
{% endif %}
</div>
{
"fields": {
"type": "cta",
"leadInText": "Interested in learning more?",
"isJumbo": true,
"linkText": "Learn more",
"linkUrl": "#",
"showDescription": false,
"description": "Here is more information to get your attention.",
"innerBlocks": {
"callToActionList": [
{
"fields": {
"linkText": "Apply now",
"linkUrl": "#",
"icon": {
"name": "edit"
}
}
},
{
"fields": {
"linkText": "Contact us",
"linkUrl": "#",
"icon": {
"name": "chat"
}
}
},
{
"fields": {
"linkText": "Upcoming events",
"linkUrl": "#",
"icon": {
"name": "calendar"
}
}
},
{
"fields": {
"linkText": "Find out more",
"linkUrl": "#",
"icon": {
"name": "right-chevron"
}
}
},
{
"fields": {
"linkText": "Read the bio",
"linkUrl": "#",
"icon": {
"name": "user"
}
}
},
{
"fields": {
"linkText": "Ask a question",
"linkUrl": "#",
"icon": {
"name": "help"
}
}
},
{
"fields": {
"linkText": "See your location",
"linkUrl": "#",
"icon": {
"name": "location"
}
}
},
{
"fields": {
"linkText": "Visit the website",
"linkUrl": "#",
"icon": {
"name": "link"
}
}
}
]
}
}
}
.call-to-action
--backgroundColor beige
--textColor blue500
&--jumbo
--backgroundColor white
&--jumbo&--dark
--backgroundColor linear-gradient(180deg, #002657 0%, #162F93 100%)
--textColor white
@extends $componentWithMargin
background var(--backgroundColor)
border-radius 16px
padding 48px
position relative
&__lead-in-text
@extends $headline2alt
color blue500
&__button
margin-top spacingLg
&__description
@extends $bodyLarge
margin-top spacingSm
&__link-list
margin-top spacingLg
@supports (display: grid)
display grid
grid-gap 24px 32px
grid-template-columns repeat(auto-fit, minmax(300px, 1fr))
&__divider-line
background-color cloudDark
content ""
display block
height 2px
margin-bottom 8px
width 100%
&__list-item
padding 8px 20px 8px 0px
No notes defined.