ofco/medicalalert-web-reloaded
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Haley Bristol
2025-01-09 09:30:12 -08:00
parent ca58f24df3
commit 8e92d0617e
19 changed files with 301 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
wp/wp-content/themes/medicalalert/acf-json/group_625dc5c18c6d5.json
View File

@@ -1790,7 +1790,7 @@
"name": "align_icons",
"aria-label": "",
"type": "select",
"instructions": "Select how many items per row for large screens.",
"instructions": "Align Icon on top or to the left of text.",
"required": 0,
"conditional_logic": 0,
"wrapper": {
@@ -2060,7 +2060,7 @@
},
{
"key": "field_6269c7d16d612",
"label": "Alignment",
"label": "Alignment Image",
"name": "alignment",
"aria-label": "",
"type": "select",
@@ -2073,13 +2073,15 @@
"id": ""
},
"choices": {
"first": "first"
"first": "Left",
"last": "Right"
},
"default_value": false,
"allow_null": 0,
"multiple": 0,
"ui": 0,
"default_value": "first",
"return_format": "value",
"multiple": 0,
"allow_null": 0,
"allow_in_bindings": 1,
"ui": 0,
"ajax": 0,
"placeholder": ""
},
@@ -6059,15 +6061,14 @@
},
"choices": {
"white": "White",
"pink": "Pink",
"red": "Red",
"light-blue": "Light Blue"
},
"default_value": "white",
"allow_null": 0,
"multiple": 0,
"ui": 0,
"return_format": "value",
"multiple": 0,
"allow_null": 0,
"allow_in_bindings": 1,
"ui": 0,
"ajax": 0,
"placeholder": ""
},
@@ -8310,5 +8311,5 @@
"active": true,
"description": "",
"show_in_rest": 0,
"modified": 1736379804
"modified": 1736391849
}

97
wp/wp-content/themes/medicalalert/dist/app.css vendored
View File

@@ -11696,10 +11696,40 @@ button[type=submit].single_add_to_cart_button,
.bg-color-navy-sky {
background: linear-gradient(90deg, #000066 0%, #3399ff 100%);
}
.bg-color-navy-sky h1, .bg-color-navy-sky .headline-largest, .bg-color-navy-sky .h1 {
color: white !important;
}
.bg-color-navy-sky h2, .bg-color-navy-sky .headline-large, .bg-color-navy-sky .h2 {
color: white !important;
}
.bg-color-navy-sky h3, .bg-color-navy-sky .headline-standard, .bg-color-navy-sky .h3 {
color: white !important;
}
.bg-color-navy-sky strong {
color: white !important;
}
.bg-color-navy-sky p {
color: white !important;
}
.g-sky-bright {
.bg-color-sky-bright {
background: linear-gradient(90deg, #3399ff 0%, rgba(51, 153, 255, 0.5) 100%);
}
.bg-color-sky-bright h1, .bg-color-sky-bright .headline-largest, .bg-color-sky-bright .h1 {
color: white !important;
}
.bg-color-sky-bright h2, .bg-color-sky-bright .headline-large, .bg-color-sky-bright .h2 {
color: white !important;
}
.bg-color-sky-bright h3, .bg-color-sky-bright .headline-standard, .bg-color-sky-bright .h3 {
color: white !important;
}
.bg-color-sky-bright strong {
color: white !important;
}
.bg-color-sky-bright p {
color: white !important;
}
.bg-color-gradient-light-blue {
background: linear-gradient(90deg, rgba(51, 153, 255, 0.5) 0%, rgba(51, 153, 255, 0.1) 100%);
@@ -11746,6 +11776,16 @@ button[type=submit].single_add_to_cart_button,
.bg-color-red-yellow {
background: linear-gradient(90deg, #cc0133 0%, #ffb020 100%);
color: white;
}
.bg-color-red-yellow li {
color: white;
}
.bg-color-red-yellow p {
color: white;
}
.bg-color-red-yellow a {
color: white;
}
.g-sky-border {
@@ -12228,7 +12268,14 @@ h6, .h6 {
}
.tile-1-3-grid {
max-width: 250px;
max-width: 300px;
z-index: 1;
}
.tile-2 {
right: 2%;
bottom: -6%;
width: 160px;
}
.tile-square {
@@ -12240,11 +12287,21 @@ h6, .h6 {
}
.radial {
bottom: -65%;
right: 0%;
top: 600px;
right: -18%;
max-width: 450px;
}
body {
overflow-x: hidden;
}
@media (min-width: 768px) {
.radial {
top: 300px;
right: -4%;
}
.pos {
margin-bottom: -175px;
}
@@ -12259,23 +12316,20 @@ h6, .h6 {
width: 100%;
}
}
@media (min-width: 992px) {
.radial {
top: 500px;
right: -4%;
}
}
.icon-info-grid-slice-container .icon-card-wrapper .icon-card {
display: grid;
grid-template-rows: 1fr auto 1fr;
width: 100%;
position: relative;
}
.icon-info-grid-slice-container .icon-card-wrapper .icon-card .icon-img {
max-width: 50px;
height: 50px;
display: flex;
align-items: end;
}
.icon-info-grid-slice-container .icon-card-wrapper .icon-card .content-wrapper .icon-link {
position: absolute;
bottom: 0;
width: -moz-fit-content;
width: fit-content;
}
.consumer-brand .icon-info-grid-slice-container .icon-card .title {
@@ -12344,6 +12398,8 @@ h6, .h6 {
.logo-grid-slice-container .logo img {
width: 100%;
filter: grayscale(1);
opacity: 0.5;
}
.phone-contact-slice-container h3, .phone-contact-slice-container .headline-standard, .phone-contact-slice-container .h3 {
@@ -12453,17 +12509,19 @@ h6, .h6 {
padding-bottom: 9rem;
}
@media (min-width: 992px) {
.testimonial-slice-container .g-sky-border {
margin-bottom: -73px;
.testimonial-slice-container .offset {
position: absolute;
left: 20px;
}
}
.testimonial-slice-container .testimonial-img {
width: 100%;
max-width: 300px;
max-height: 300px;
-o-object-fit: cover;
object-fit: cover;
}
.testimonial-slice-container .testimonial-inner-content-wrapper {
padding-left: 3em;
}
.testimonial-slice-container .testimonial-inner-content-wrapper .testimonial-title {
font-size: 32px;
font-weight: bold;
@@ -12511,7 +12569,10 @@ h6, .h6 {
}
.video-copy-slice-container .radial-center-graphic {
top: 0;
left: 50%;
left: calc(50% - 500px);
}
.video-copy-slice-container .radial-center-graphic svg {
width: 1000px;
}
.video-grid-slice-container .heading {

2
wp/wp-content/themes/medicalalert/dist/mix-manifest.json vendored
View File

@@ -1,4 +1,4 @@
{
"/app.js": "/app.js?id=def087bfee86b3ced20472c4fd21ee05",
"/app.css": "/app.css?id=4a9aeb5a5a22c11c195b2ce4905e2d50"
"/app.css": "/app.css?id=ce0cb2dfa7a09d1c721b431100aa8cfe"
}

55
wp/wp-content/themes/medicalalert/src/scss/global.scss
View File

@@ -560,10 +560,50 @@ button[type="submit"].single_add_to_cart_button,
.bg-color-navy-sky {
background: linear-gradient(90deg, rgba(0, 0, 102, 1) 0%, rgba(51, 153, 255, 1) 100%);
h1 {
color: white !important;
}
.g-sky-bright {
h2 {
color: white !important;
}
h3 {
color: white !important;
}
strong {
color: white !important;
}
p {
color: white !important;
}
}
.bg-color-sky-bright {
background: linear-gradient(90deg, rgba(51, 153, 255, 1) 0%, rgba(51, 153, 255, 0.5) 100%);
h1 {
color: white !important;
}
h2 {
color: white !important;
}
h3 {
color: white !important;
}
strong {
color: white !important;
}
p {
color: white !important;
}
}
.bg-color-gradient-light-blue {
@@ -619,6 +659,19 @@ button[type="submit"].single_add_to_cart_button,
.bg-color-red-yellow {
background: linear-gradient(90deg, rgba(204, 1, 51, 1)0%, rgba(255, 176, 32, 1) 100%);
color: white;
li {
color: white;
}
p {
color: white;
}
a {
color: white;
}
}
.g-sky-border {

34
wp/wp-content/themes/medicalalert/src/scss/hero.scss
View File

@@ -30,14 +30,15 @@
}
.tile-1-3-grid {
max-width: 250px;
max-width: 300px;
z-index: 1;
}
// .tile-2 {
// right: 2%;
// bottom: -6%;
// width: 160px;
// }
.tile-2 {
right: 2%;
bottom: -6%;
width: 160px;
}
.tile-square {
max-width: 250px;
@@ -48,12 +49,21 @@
}
.radial {
bottom: -65%;
right: 0%;
top: 600px;
right: -18%;
max-width: 450px;
}
body {
overflow-x: hidden;
}
@include media-breakpoint-up(md) {
.radial {
top: 300px;
right: -4%
}
.pos {
margin-bottom: -175px;
@@ -70,3 +80,11 @@
}
}
@include media-breakpoint-up(lg) {
.radial {
top: 500px;
right: -4%
}
}

10
wp/wp-content/themes/medicalalert/src/scss/icon-info-grid.scss
View File

@@ -4,22 +4,12 @@
display: grid;
grid-template-rows: 1fr auto 1fr;
width: 100%;
position: relative;
.icon-img {
max-width: 50px;
height: 50px;
display: flex;
align-items: end;
}
.content-wrapper {
.icon-link {
position: absolute;
bottom: 0;
width: fit-content;
}
}
}
}
}

2
wp/wp-content/themes/medicalalert/src/scss/logo-grid.scss
View File

@@ -2,6 +2,8 @@
.logo {
img {
width: 100%;
filter: grayscale(1);
opacity: 0.5;
}
}
}

11
wp/wp-content/themes/medicalalert/src/scss/testimonial.scss
View File

@@ -2,21 +2,20 @@
padding-bottom: 9rem;
@include media-breakpoint-up(lg) {
.g-sky-border {
margin-bottom: -73px;
.offset {
position: absolute;
left: 20px;
}
}
.testimonial-img {
width: 100%;
max-width: 300px;
max-height: 300px;
object-fit: cover;
}
.testimonial-inner-content-wrapper {
padding-left: 3em;
.testimonial-title {
font-size: 32px;
font-weight: bold;

6
wp/wp-content/themes/medicalalert/src/scss/video-copy.scss
View File

@@ -26,8 +26,12 @@
}
.radial-center-graphic {
svg {
width: 1000px;
}
top: 0;
left: 50%;
left: calc(50% - 500px);
}
}

2
wp/wp-content/themes/medicalalert/tpl/form_with_image.tpl
View File

@@ -2,7 +2,7 @@
<section id="formAnchor" class="form-with-image-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container py-5">
<div class="row">
<div class="col-12 col-md-6 order-{{alignment}}">
<div class="col-12 col-md-6 order-{{alignment}} my-3">
<div class="g-purple-border m-auto">
<img class="w-100" src="{{image.url}}" alt="{{image.alt}}" />
</div>

98
wp/wp-content/themes/medicalalert/tpl/hero.tpl
View File

@@ -1,7 +1,7 @@
<section class="hero-slice-container p-relative">
<div class="g-sky-hero p-relative overflow-hidden">
<section class="hero-slice-container">
<div class="g-sky-hero">
<div class="container hero-wrapper">
<div class="row h-100 pb-5 d-flex align-items-center">
<div class="row h-100 pb-5 p-relative d-flex align-items-center">
<div class="col-md-6 pt-5 d-flex flex-column justify-content-center h-100">
<h1 class="mb-2 hero-title">{{title}}</h1>
<p class="mb-4 hero-copy">{{copy}}</p>
@@ -12,7 +12,50 @@
{{/if}}
</div>
<div class="col-md-6">
<div class="p-absolute radial">
<div class="d-flex align-items-center justify-content-center">
{{#if tile_image_3}}
<div class="pt-md-5 mt-md-5">
<div class="g-sky-border mt-5 me-3 tile-1-3-grid p-relative z-0">
<img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
</div>
</div>
<div>
<div class="pos z-1 p-relative">
<div class="g-sky-border mb-3">
<img class="w-100 tile-square" src="{{tile_image_2.url}}" alt="{{tile_image_2.alt}}" />
</div>
<div class="g-sky-border">
<img class="w-100 tile-square" src="{{tile_image_3.url}}" alt="{{tile_image_3.alt}}" />
</div>
</div>
</div>
{{else}}
{{#if tile_image_2}}
<div class="pt-md-5 mt-md-5">
<div class="g-sky-border mt-5 me-3 tile-1 p-relative z-0">
<img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
</div>
</div>
<div class="p-absolute tile-square tile-2">
<div class="g-sky-border">
<img class="w-100" src="{{tile_image_2.url}}" alt="{{tile_image_2.alt}}" />
</div>
</div>
{{else}}
{{#if tile_image_1}}
<div class="g-sky-border mt-5 tile-1 p-relative z-0 ms-auto">
<img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
</div>
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
</div>
</div>
</div>
<div class="p-absolute radial w-100">
<svg width="452" height="452" viewBox="0 0 452 452" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_252_440)">
<path opacity="0.83" d="M226.002 165.049C234.276 165.049 242.27 166.689 249.728 169.844C256.991 172.918 263.523 177.329 269.097 182.907C274.671 188.481 279.082 195.009 282.161 202.276C285.32 209.735 286.955 217.728 286.955 226.002C286.955 234.276 285.315 242.27 282.161 249.728C279.086 256.991 274.675 263.523 269.097 269.097C263.523 274.671 256.991 279.082 249.728 282.161C242.27 285.32 234.276 286.955 226.002 286.955C217.728 286.955 209.735 285.315 202.276 282.161C195.013 279.086 188.482 274.675 182.908 269.097C177.334 263.523 172.923 256.995 169.844 249.728C166.685 242.27 165.049 234.276 165.049 226.002C165.049 217.728 166.689 209.735 169.844 202.276C172.918 195.013 177.329 188.481 182.908 182.907C188.482 177.334 195.013 172.922 202.276 169.844C209.735 166.685 217.728 165.049 226.002 165.049Z" fill="white" fill-opacity="0.3" />
@@ -28,51 +71,4 @@
</defs>
</svg>
</div>
<div class="d-flex align-items-center justify-content-center">
{{#if !tile_image_3}}
{{#if !tile_image_2}}
{{#if tile_image_1}}
<div class="g-sky-border mt-5 tile-1 p-relative z-0 ms-auto">
<img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
</div>
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
</div>
</div>
</div>
{{#if tile_image_3}}
<div class="row p-absolute w-100">
<div class="col-md-6 offset-md-6">
<div class="d-flex justify-content-center w-100">
{{#if tile_image_1}}
<div class="me-3">
<div class="g-sky-border mt-5 tile-1-3-grid">
<img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
</div>
</div>
{{/if}}
<div>
{{#if tile_image_2}}
<div class="tile-square mb-3">
<div class="g-sky-border">
<img class="w-100" src="{{tile_image_2.url}}" alt="{{tile_image_2.alt}}" />
</div>
</div>
{{/if}}
<div class="tile-square">
<div class="g-sky-border">
<img class="w-100" src="{{tile_image_3.url}}" alt="{{tile_image_3.alt}}" />
</div>
</div>
</div>
</div>
</div>
</div>
{{/if}}
</section>

6
wp/wp-content/themes/medicalalert/tpl/icon_info_grid.tpl
View File

@@ -4,8 +4,8 @@
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-{{number_of_columns}} d-flex justify-content-center gx-5 gy-5">
{{#each icon_cards}}
<div class="col icon-card-wrapper">
<div class="icon-card">
<div class="icon-img">
<div class="icon-card d-flex {{../align_icons}}">
<div class="icon-img mt-2 me-3">
<img class="img-fluid" src="{{icon.url}}" alt="{{icon.alt}}" />
</div>
<div class="content-wrapper">
@@ -14,9 +14,11 @@
{{{copy}}}
</div>
{{#if link}}
<div>
<div class="icon-link">
<a href="{{link.url}}" class="text-nowrap button--primary">{{link.title}}</a>
</div>
</div>
{{/if}}
</div>
</div>

2
wp/wp-content/themes/medicalalert/tpl/icon_video_aside.tpl
View File

@@ -28,7 +28,7 @@
{{/each}}
</div>
</div>
<div class="col-12 col-md-6">
<div class="col-12 col-md-6 mt-4">
<div class="video">
<div class="ratio ratio-16x9">
<iframe src="https://player.vimeo.com/video/{{video}}" allowfullscreen></iframe>

13
wp/wp-content/themes/medicalalert/tpl/image_aside.tpl
View File

@@ -2,18 +2,17 @@
<section class="image-aside-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container">
<div class="row row-cols-2 gx-4">
<div class="col-12 col-md-6 my-auto order-lg-{{alignment}}">
<div class="col-12 col-md-6 my-auto py-3 order-lg-{{alignment}}">
<div class="g-sky-border">
<img class="img-fluid image-aside-img" src="{{image.url}}" alt="{{image.alt}}">
</div>
</div>
<div class="col-12 col-md-6 my-auto py-3">
<div class="image-aside-copy">
{{{copy}}}
</div>
</div>
<div class="col-12 col-md-6 order-lg-2">
<div class="image-aside-img-wrapper">
<img class="img-fluid image-aside-img" src="{{image.url}}" alt="{{image.alt}}">
</div>
</div>
</div>
</div>
</section>
<!-- Image Aside END -->

26
wp/wp-content/themes/medicalalert/tpl/image_with_checklist.tpl
View File

@@ -2,30 +2,30 @@
<section class="image-with-checklist-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container-fluid image-with-checklist-wrapper">
<div class="container">
<div class="row justify-content-center align-items-center gx-5">
<div class="col-auto mb-4">
<img class="img-fluid image-with-checklist-img" src="{{image.url}}" alt="{{image.alt}}" />
<div class="row justify-content-center align-items-center">
<div class="col-auto p-3">
<img class="img-fluid g-sky-border" src="{{image.url}}" alt="{{image.alt}}" />
</div>
<div class="col-auto col-lg-6 my-auto">
<div class="col-auto col-lg-6 my-auto p-3">
<div class="image-with-checklist-copy">{{{copy}}}</div>
<div class="mt-4 mb-4 image-with-checklist-list">
<div class="image-with-checklist-list">
{{#each checklist_items}}
<div class="row mt-3 mb-3">
<div class="col-1">
<div class="check">
<img src="/wp-content/themes/medicalalert/assets/media/images/medicalalert__custom-list-image.png" alt="Checkmark">
<div class="row mb-2">
<div class="d-flex">
<div class="check me-2 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="#5BB25D" class="bi bi-check-lg" viewBox="0 0 16 16">
<path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z" />
</svg>
</div>
</div>
<div class="col-11">
<div class="checklist-item">
<p>{{checklist_item}}</p>
<p class="m-0">{{checklist_item}}</p>
</div>
</div>
</div>
{{/each}}
</div>
{{#if link}}
<div class="link mb-5">
<div class="link mt-4">
<a class="button--primary" href="{{link.url}}">{{link.title}}</a>
</div>
{{/if}}

11
wp/wp-content/themes/medicalalert/tpl/image_with_icon_info_grid.tpl
View File

@@ -1,16 +1,15 @@
<!-- Image With Icon Info Grid BEGIN -->
<section class="image-with-icon-info-grid-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container">
<div class="row gx-3">
<div class="col-12 col-md col-lg-3 order-{{alignment}} align-self-center">
<div class="image">
<img src="{{image.url}}" alt="{{image.alt}}">
<div class="col-12 col-md col-lg-4 order-md-{{alignment}} align-self-center py-3">
<div class="g-purple-border">
<img class="w-100" src="{{image.url}}" alt="{{image.alt}}">
</div>
</div>
<div class="col-12 col-md col-lg-9 order-2 my-auto">
<div class="col-12 col-md col-lg-8 my-auto py-3">
<div class="icon-info-grid">
<div class="row row-cols-lg-2 gx-3 gy-5">
<div class="row row-cols-lg-2 gx-3 gy-3">
{{#each icon_info_cards}}
<div class="col-12">
<div class="row">

4
wp/wp-content/themes/medicalalert/tpl/products_list.tpl
View File

@@ -1,7 +1,7 @@
<!-- Products List BEGIN -->
<section class="products-list-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container">
<div class="row">
<div class="row gx-2">
{{#each products}}
<div class="col-12 col-lg-4 mb-2">
<div class="products-list-item h-100">
@@ -12,7 +12,7 @@
</div>
<div class="products-list-item-inner-wrapper align-self-stretch">
<div class="line-sm pt-1"></div>
<h3 class="products-list-title mb-3 pt-4">{{title}}</h3>
<h3 class="products-list-title mb-3 pt-4 fw-bold">{{title}}</h3>
<div class="products-list-copy pb-2">
<p>{{{copy}}}</p>
</div>

14
wp/wp-content/themes/medicalalert/tpl/testimonial.tpl
View File

@@ -1,5 +1,5 @@
<!-- Testimonial BEGIN -->
<section class="testimonial-slice-container p-relative mx-xs-2 mx-md-0 overflow-hidden">
<section class="testimonial-slice-container mx-xs-2 mx-md-0 overflow-hidden p-relative padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="p-absolute radial">
<svg class="w-100" width="614" height="1023" viewBox="0 0 614 1023" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" clip-path="url(#clip0_252_476)">
@@ -46,19 +46,19 @@
</defs>
</svg>
</div>
<div class="container rounded bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="row">
<div class="col-lg-4 d-flex justify-content-center mb-4">
<div class="g-sky-border z-0">
<div class="container rounded p-4 bg-color-{{background_color}}">
<div class="row gx-5">
<div class="col-lg-5 p-relative d-flex justify-content-center mb-4">
<div class="g-sky-border z-0 offset">
<img class="testimonial-img" src="{{image.url}}" alt="{{image.alt}}" />
</div>
</div>
<div class="col-lg-8 my-auto testimonial-inner-content-wrapper">
<div class="col-lg-7 my-auto testimonial-inner-content-wrapper">
<svg width="35" height="29" viewBox="0 0 35 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.93 28.57V18.49C19.93 13.99 21.16 10.06 23.62 6.7C26.08 3.28 29.86 1.18 34.96 0.399999V6.97C32.02 7.33 30.07 8.29 29.11 9.85C28.15 11.41 27.67 13.48 27.67 16.06L22.36 14.98H34.78V28.57H19.93ZM0.4 28.57V18.49C0.4 13.99 1.63 10.06 4.09 6.7C6.55 3.28 10.33 1.18 15.43 0.399999V6.97C12.49 7.33 10.54 8.29 9.58 9.85C8.62 11.41 8.14 13.48 8.14 16.06L2.83 14.98H15.25V28.57H0.4Z" fill="white" />
</svg>
<h3 class="fw-bold f-navy mb-2">{{header}}</h3>
<h3 class="fw-bold f-navy mb-2 mt-1">{{header}}</h3>
<div class="f-black">{{{copy}}}</div>
<p class="f-black mt-4">
{{quote_attribution}}