Note: This article is written for Giving Day hosts. If you are a participant or supporter of a Giving Day, this article may not pertain to your efforts.

To use these templates, paste the code into a new "Custom HTML" landing page section, then fill in the blanks with your content. The blanks to fill in are formatted as "{Insert...}".

Custom About Section

Right Aligned Image

<!-- Outer Container -->
<div class="about" style="background-color:#3b2360;">
<!-- Inner Container -->
<div class="container section-wrapper section-space d-flex flex-column flex-lg-row justify-content-between align-items-center" style="color: white;">
<!-- Mobile Header -->
<h2 class="text-center mt-0 d-lg-none">{Insert the header copy that will appear on mobile devices}</h2>
<div class="about-text">
<!-- Desktop Header -->
<h2 class="mt-0 d-none d-lg-block">{Insert the header copy that will appear on desktop devices}</h2>
<p>{Insert main copy}</p>
</div>
<div class="flex-image">
<img alt="" class="rounded-circle mw-100" role="presentation" src="{Insert link to image}">
</div>
</div>
</div>

Left Aligned Image

<div class="about" style="background-color:#3b2360;">
<div class="container section-wrapper section-space d-flex flex-column flex-lg-row justify-content-between align-items-center gg-branding-white">
<!-- Mobile Header -->
<h2 class="text-center mt-0 d-lg-none">{Insert the header copy that will appear on mobile devices}</h2>
<div class="flex-image">
<img alt="" class="rounded-circle mw-100" role="presentation" src="{Insert link to image}">
</div>
<div class="about-text">
<!-- Desktop Header -->
<h2 class="mt-0 d-none d-lg-block">{Insert the header copy that will appear on desktop devices}</h2>
<p>{Insert main copy}</p>
</div>
</div>
</div>

3 Part Call to Action

<!-- Outer container -->
<div class="container section-wrapper"">
<!-- Row 1 -->
<div class="row d-flex justify-content-center text-center">
<!-- Row 1, Column 1 -->
<div class="col-md-4 col-12" style="padding: 30px;">
<div class="gg-branding-lead" style="height: 100%; padding: 0;">
<img alt="" aria-hidden="true" style="width: 100%; vertical-align: middle; border-style: none;" src="{Insert link to image 1}">
<a class="btn gg-branding-lead-btn" href="{Insert link to destination 1}">{Insert button 1 copy}</a>
</div>
</div>
<!-- Row 1, Column 2 -->
<div class="col-md-4 col-12" style="padding: 30px;">
<div class="gg-branding-lead" style="height: 100%; padding: 0;">
<img alt="" aria-hidden="true" style="width: 100%; vertical-align: middle; border-style: none;" src="{Insert link to image 2}">
<a class="btn gg-branding-lead-btn" href="{Insert link to destination 2}">{Insert button 2 copy}</a>
</div>
</div>
<!-- Row 1, Column 3 -->
<div class="col-md-4 col-12" style="padding: 30px;">
<div class="gg-branding-lead" style="height: 100%; padding: 0;">
<img alt="" aria-hidden="true" style="width: 100%; vertical-align: middle; border-style: none;" src="{Insert link to image 3}">
<a class="btn gg-branding-lead-btn" href="{Insert link to destination 3}">{Insert button 3 copy}</a>
</div>
</div>
</div>
</div>

Highlighted Profiles with Donate Buttons

<!-- Outer container -->

<div class="container section-wrapper">
<div class=" row d-flex justify-content-center text-center">
<div class="col-md-4 col-12" style="padding: 30px;">
<div class="gg-branding-lead" style="height: 100%; padding: 0;">
<img alt="" aria-hidden="true" style="width: 100%; vertical-align: middle; border-style: none;" src="{Insert link to image 1}">
<p style="color: black; padding: 2px;">{Insert name/description copy}</p>
<a class="btn gg-branding-lead-btn" href="{Insert link to profile or donation form}">Donate</a>
</div>
</div>

<div class="col-md-4 col-12" style="padding: 30px;">
<div class="gg-branding-lead" style="height: 100%; padding: 0;">
<img alt="" aria-hidden="true" style="width: 100%; vertical-align: middle; border-style: none;" src="{Insert link to image 2}">
<p style="color: black; padding: 2px;">{Insert name/description copy}</p>
<a class="btn gg-branding-lead-btn" href="{Insert link to profile or donation form}">Donate</a>
</div>
</div>

<div class="col-md-4 col-12" style="padding: 30px;">
<div class="gg-branding-lead" style="height: 100%; padding: 0;">
<img alt="" aria-hidden="true" style="width: 100%; vertical-align: middle; border-style: none;" src="{Insert link to image 3}">
<p style="color: black; padding: 2px;">{Insert name/description copy}</p>
<a class="btn gg-branding-lead-btn" href="{Insert link to profile or donation form}">Donate</a>
</div>
</div>
</div>

<div class="row d-flex justify-content-center text-center">
<div class="col-md-4 col-12" style="padding: 30px;">
<div class="gg-branding-lead" style="height: 100%; padding: 0;">
<img alt="" aria-hidden="true" style="width: 100%; vertical-align: middle; border-style: none;" src="{Insert link to image 4}">
<p style="color: black; padding: 2px;">{Insert name/description copy}</p>
<a class="btn gg-branding-lead-btn" href="{Insert link to profile or donation form}">Donate</a>
</div>
</div>

<div class="col-md-4 col-12" style="padding: 30px;">
<div class="gg-branding-lead" style="height: 100%; padding: 0;">
<img alt="" aria-hidden="true" style="width: 100%; vertical-align: middle; border-style: none;" src="{Insert link to image 5}">
<p style="color: black; padding: 2px;">{Insert name/description copy}</p>
<a class="btn gg-branding-lead-btn" href="{Insert link to profile or donation form}">Donate</a>
</div>
</div>

<div class="col-md-4 col-12" style="padding: 30px;">
<div class="gg-branding-lead" style="height: 100%; padding: 0;">
<img alt="" aria-hidden="true" style="width: 100%; vertical-align: middle; border-style: none;" src="{Insert link to image 6}">
<p style="color: black; padding: 2px;">{Insert name/description copy}</p>
<a class="btn gg-branding-lead-btn" href="{Insert link to profile or donation form}">Donate</a>
</div>
</div>
</div>
</div>