Copying a Template Donation Form
Step 1. Identify Donation Form
- Form Name Format
Step 2. Configure Donation Levels
Step 3. Design Donor Screens
Step 4. Validate
Step 5. Configure Autoresponders
Step 7. Publish
Creating a Switching Array Donation Form
- Donation Levels
- Donation Form Configuration
Add Partner Matching Gift Opt-In Checkbox
Remove Dollar Signs From Levels
Address Suggestions

# Copying a Template Donation Form

Navigate to Fundraising > Donation Management
Search for a work Templates within the Campaigns tab
From the Results list click on the Manage link under the Actions Column to view all the Template Donation Forms that reside within this Campaign
Click on the Copy link under the Actions column of the template type that is most similar to the new form you wish to create:
a. TEMPLATE: One-Time Donation Form with Optional Monthly Recurring & Dedication
b. TEMPLATE: Monthly Recurring Only Donation Form
c. TEMPLATE: Tribute Donation Form with Optional Monthly Recurring
On the copy a form screen: a. Set the form name per L. Romao’s guidelines for private form name. You will have the opportunity later to set a public form name.
b. From the Donation Campaign dropdown, select the corresponding Campaign that this Form should be copied into.
Note: A donation form cannot be moved into another Lumiante campaign once it is created so this step is very important. If a form needs to be relocated you will need to copy it again into the correct campaign and then proceed with unpublishing & archiving the miss-copied form.
c. Leave the Form Behavior dropdown set to Responsive.
d. Click Finish.
The donation form will be successfully copied at this time and directed to Step 1. Identify Donation Form.

# Step 1. Identify Donation Form

Form Name – This is a private name of the donation form set in the specified format. It appears within donation form lists in Luminate, it is used to cross reference data with BBCRM, and is used in analytics. Analytics will not be tracked on the page, if the donation form name is not properly named.
Public Name – This is the name that will be visible in the browser tab, and recorded in analytics as a page title. It will also be displayed on the tax receipts as Fund: [Public Form Name]
Description – Visible in the list of donation forms to admins to explain how the form will be used.
Security Category – Leave General selected in the dropdown Note: In future you may have more security categories created if you wish to restrict admins to only editing certain donation forms.
Form Designee – Leave blank; donation forms will be cross referenced and where needed in the future you will include a designated giving element within the form as a dropdown for selection.
Interaction Mode – Leave online-only set
Form Layout – Leave Responsive set
Default Source Code – Leave blank
Default SubSource Code – Leave blank

# Form Name Format

The value must be in the following format, ${} designated a variable, the entire text must be replaced by the actual value. All values are separated by a pipe |, if the value is empty the pipe must still be included.

${bbcrmSourceCode}|${fundType}|${appealName}|${designation}|${department}

${bbcrmSourceCode} - required value from BBCRM that will be used to cross-reference the forms, this value is also used as a transaction source code and is recorded in analytics, example value C16101OWNO01TBZBBK
${fundType} - required value, must include one of the following fund types:
- BR - for ...
- Des - for designated funds
- Emer - for emergency appeals
- Undes - undesignated, to be used if no other types apply
${appealName} - public name of the donation form, required
${designation} - name of the designation, optional
${department} - name of the department creating this form, optional

Examples:

A16031OWNO01AYZA9H|BR|2016-03 March Acquisition|90000-9009600-84001000-IMPACT MATCH|RD-DRM-DRM-NEW
C13051OWNO004AXZR2|Emer|Emergency 1 - DISNEY - WPG|Web Donation Form (Pre-positioned)|
A17061OWNO02DIZDF5|Des|2017 MBC HEART CRM|Web Donation|
C16101OWNO01TBZBBK|Undes|Web Mission Global Action Fund||

# Step 2. Configure Donation Levels

Luminate Help Doc on Donation Levels (opens new window)

To change the Donation Level Amount, click the Edit link on the corresponding level.

a. 1. Level Name:
Level Name is not being displayed under the current Donation Form designs, but feel free to label as desired or set to the Amount – ex. $10

b. 2. Gift Amount:
i. Fix the amount of the gift: Modify the amount of the gift here
ii. Calculate a dynamic donation ask amount using the formula specified: You can utilize this feature to present varying levels to Logged In Members based on their past interactions. Anonymous Visitors and Non-Donors will see the fallback Amount. Note: If utilizing this feature ensure "...then, round the amount to the nearest multiple of:" is set to a whole number – ex. $1, $5, etc. as we have a script employed on the site to strip out the cents from displaying on Donation Levels. Without the rounding there is potential that the Dynamic Ask amount could have a cents value.

c. 3. Value of Goods and/or Services:
Use this field only if the Donation Form has a purpose to send a gift with a Fair Market Value – ex. Tote Bag has an FMV of $10 so $10 should be entered in this field.

d. 4. User Security Category:
Leave General selected from the Dropdown

e. 5. Promotion Code:
Optionally enter a promo code string that an inbound donor most have on their Donation Form URL in order to access this level (Promo Code applied via a Vanity URL or sent via email).
Link Syntax: Donation_Form_URL_Here &s_promoCode= promocode_string_here

f. 6. Level Group:
All donors to this Donation Level can automatically be added to a group. Use the Select button to specify an existing group or to create a new one. Leave blank for now. May be useful in the future if you wish to leverage this Group Membership to conditionalize content featured on the Luminate Pages to a Logged In Member based on a previous transaction.

g. For the Donor Entered Amount/Other Donation Level, be sure to specify the minimum amount – ex. $5.
Click the Create a Donation Level button to create a New Level and follow steps above. Since Donation Levels cannot be deleted, only Unpublished, it's best to reuse and edit an existing level if possible.
Use the Up and Down Arrows within the Order Column to dictate the order of the donation levels on the Donation Form.
For Donation Levels that you do not wish to feature, click the Unpublish link under the Actions Column.

# Step 3. Design Donor Screens

# Donation Form

Click the Edit link under the Actions Column for Donation Form to edit the Intro Copy and Donation Form Fields presented to the donor.
Note: Due to copying an existing Template which fits the purpose of the new Donation Form, minimal updates will need to be made on the form in regards to Fields.

In the Selected Data Elements column, select HTML Caption and then click Save Order and Edit Selected Button. This Data Element will now be Active and Editable beneath.

# Applying a Background Image

  <!-- If Setting a Background Image, Replace Image URL; Ensure URL is HTTPS & ideally comes from cloudfront.net -->
  [[U0:fullBackgroundImage=[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/Sustainability_TeamTomorrow.jpg]]

  <!-- An option to set a half-width image, 
       set |HALF-LEFT for image to align to the leftt
       set |HALF-RIGHT for image to align to the right -->
  [[U0:fullBackgroundImage=[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/empowerment-tile.jpg|HALF-LEFT]]
  [[U0:fullBackgroundImage=[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/empowerment-tile.jpg|HALF-RIGHT]]

Use [[S80:staticAssetsBaseUrl]] to load image from the optimized secure and cached source
If using external site be sure the image URL starts with https://
Remove this code if the form does not require a background image. The form will default to a White Background Color if a color is not declared – see below.
On Mobile, the Background Image is hidden and in its place a White Background Color is shown if a color is not declared – see below.

# Alternative: Applying a Background Color

Currently the variables configured are red, biscuit, biscuit-medium, and biscuit-light. If there is a need, additional Color Variables can be added in the future.

  <!-- Color Options are red, biscuit, biscuit-medium, and biscuit-light; use if there is no background image and to override the default white -->
  [[U0:backgroundColor=red]]

Ensure the Background Image variable above is not present.
Note: If both are present, the Background Image will be visible on larger resolutions and on Mobile the Fallback Background color will be the variable declared – in the code above it would be red.
When using a color variable without a Background Image declared, the Background color will be maintained across all resolutions.

# Column Styles: One or Two Columns

Available options are:

one-column
one-column-white
one-column-wide
one-column-wide-white
two-columns

# `one-column`

Intro HTML caption appears in the same column as the form fields:

  [[U0:donationFormStyle=one-column]]

# `one-column-white`

Intro HTML caption appears in the same column as the form fields, with white background:

[[U0:donationFormStyle=one-column-white]]

# `one-column-wide`

Intro HTML caption appears in the same column as the form fields, but in a wide column:

  [[U0:donationFormStyle=one-column-wide]]

# `one-column-wide-white`

Intro HTML caption appears in the same column as the form fields, but in a wide column, with white background:

[[U0:donationFormStyle=one-column-wide-white]]

# `two-columns`

Intro HTML caption appears in the opposite column as the form fields:

  [[U0:donationFormStyle=two-columns]]

# Alignment Options: Left or Right

# Right

If the column style is set to one column, then the Intro HTML and Form Fields will all align right on the page
If the column style is set to two columns, then the Intro HTML will align left and the Form Fields will align right on the page

<!-- Alignment Options are left or right; Alignment refers to positioning of Form Field Container -->
[[U0:donationFormAlignment=right]]

# Left

If the column style is set to one column, then the Intro HTML and Form Fields will all align left on the page
If the column style is set to two columns, then the Intro HTML will align right and the Form Fields will align left on the page

<!-- Alignment Options are left or right; Alignment refers to positioning of Form Field Container -->
[[U0:donationFormAlignment=left]]

# Recurring Only Forms: Displays Additional Language beneath Submit Button

For non-recurring only forms, this code must be set to false. If variable is missing from form then there is a chance for this variable to carry over from a recurring only form and display the content if a user is navigating between several donation forms.

  <!-- Recurring Options are false or true; use true when the form is RECURRING ONLY. Displays paragraph beneath submit button -->
  [[U0:recurringOnly=true]]

# Setting the Heading & Image/Paragraph Text White Backgrounds to Touch

For content that is separate, this code must be set to false. If variable is missing from form then there is a chance for this variable to carry over from another form and display the content as touching if a user is navigating between several donation forms.

  <!-- Tab Options are false or true; use true when the heading and paragraph white backgrounds should touch --> 
  [[U0:headerTab=true]]

# Pre-Checking the Optional Monthly Checkbox on One-Time Forms

For recurring only forms, this can be removed as that form type does not have the checkbox. For all other combination forms, this code must be set to false if the box should not be pre-checked. If variable is missing from form then there is a chance for this variable set to true to carry over from another combo form and display pre-checked if a user is navigating between several donation forms.

  <!-- Recurring checked - if true then the box is auto-checked-->
  [[U0:recurringChecked=true]]

# No Selected Gift Type

On forms that support one-time and recurring gifts, there is an option to disable default gift type selection and prompt the user to select the gift type.

In such case, the form must be configured not to have recurring checked field not selected.

  <!-- Recurring option is NOT checked, reset previous form values -->
  [[U0:recurringChecked=false]]

Then the form must be accessed with the monthly=none parameter in the URL. Example:
https://lo-test.savethechildren.org/site/Donation2?df_id=2564&2564.donation=form1&mfc_pref=T&monthly=none

# Intro Copy & Optional Image

  <div class="donation-text\_\_wrapper">
    <!-- Can use h1, h2 or h3 and must include span tags - refer to documentation for more styling options -->
    <h2><span>Thank You!</span></h2>
    <div class="donation-text">
      <!-- Optional Image to include - can set alignment and hide on mobile -->
      <figure class="figure--center hidden--mobile">
        <img src="http://placehold.it/768x768" alt="">
        <!-- Optional caption to display beneath the Image; can set alignment or it will inherit the alignment set above -->
        <figcaption>This is the caption of my image.</figcaption>
      </figure>
      <!-- Intro Copy -->
      <p>Your contribution will help support our organization's much-needed programs that fund important projects and programs. To make a tax-deductible donation right now, please fill out and submit the form below.</p>
    </div>
  </div>

# Headings

Heading with White Rounded Background:

  <h2><span>Thank You!</span></h2>

Options are h1, h2 and h3 *. MUST INCLUDE THE SPAN for White Background Styling *. Additional classes to change the color of the heading (apply to the span) or on paragraph tags:
- class="text--black"
- class="text--red"
- class="text--grey"
- class="text--plum"
- class="text--teal"
- class="text--no-case"
- class="text--uppercase"
- class="text--underline"
- class="text--bold"
- class="text--large" (for paragraphs only)

Special Case: Can apply to h1 and h3 as well as well as apply the classes on the span for different colors and case

  <h2 class="text--staggered">
    <span>Heading2</span><br>
    <span>sencond line</span
  </h2>

# Images

  <figure class="figure--center hidden--mobile">

Use a secure image URL – https://
If including an Image on the form, the code above will hide the Image (and caption if added) on mobile. To display the Image (and caption if added) on mobile, remove the hidden--mobile from the class above resulting in: <figure class="figure--center">
For Images that span the full width of the column, use the class below only: <figure class="figure--center">
For Images that DO NOT span the full width of the column, use any of the classes below to align/float the image. If there is a caption displayed, it will also inherit the figures alignment per this class unless a separate caption alignment is declared – see below. (The hidden—mobile class can be added to all):
- <figure class="figure--center">
- <figure class="figure--left">
- <figure class="figure--right">
The caption (which is optional) will inherit the alignment as set above or a class can be applied to alter the alignment:
- <figcaption class="text--center">
- <figcaption class="text--left">
- <figcaption class="text--right">

# Designated Giving Text

If the donation form is a designated form, a custom text can be included that will be placed above the gift amounts. To include the custom text, add the following code to the first caption of the donation form. Include the code anywhere in the first HTML caption, as long as it's outside of the <div class="donation-text">.

[[S51:reus_donation__designations]]

See designation article for more information on customizing the text.

# Donation Levels

To add a new set of donation levels, click the Edit link under the Actions Column for Donation Form. Locate the necessary element in the left column that ends with Donation Level. Add the field into the right column. Then select the option and then click on Save Order and Edit Selected.

# Recurring Gifts

To set recurring behavior, click the Edit link under the Actions Column for Donation Form. Locate the Standard Donation Level or Forever Sustainer Donation Level or Flexible Sustainer Donation Level, select the option and then click on Save Order and Edit Selected.

# When to Use Different Donation Levels

For one-time gifts and combo forms that accept one-time & recurring gifts use Standard Donation Level
For forms that support recurring gifts only use Forever Sustainer Donation Level
For forms that support one-time and multiple recurring gifts use Flexible Sustainer Donation Level

# Standard Donation Level

To configure recurring behavior in the Standard Donation Level field:

Check the checkbox Yes, allow optional recurring behavior.
Select a valid option in Fixed Frequency
Leave Forever duration, that's the default value and it means the gift will never expire
Enter the value selected in Fixed Frequency field into Field Label - Optional Repeat. Valid options are:
- Monthly
- Quarterly
- Annually
If the checkbox is going to be visible to the end users, ensure that one of the following keywords is present, so we can detect the frequency:
- month or monthly
- quarter or quarterly
- year or yearly

Note: The value in the field Field Label - Optional Repeat is a key value and will be used to set the value of gift type button, text in the submit button, and the product id in analytics. Sadly, there is no other way we can read the gift frequency on the donation page.

# Forever Sustainer Donation Level

To configure recurring behavior in the Forever Sustainer Donation Level field:

Select all applicable values for the field Sustainer Giving Patterns

# Flexible Sustainer Donation Level

To configure recurring behavior in the Flexible Sustainer Donation Level field:

Select all applicable frequencies for the field Frequency Patterns
Select Ongoing is allowed in the field Duration Period to expose forever option, the scripts will automatically select the longest duration.
See Donation Levels article on how to configure gift arrays for each frequency.

# Additional Features

The code was customized to show the donation levels based on the selected frequency or to hide specific levels. Read Donation Levels article for more information about configuring these features.

# eCard Replacement

By default, Luminate renders very low quality eCard images. A feature to replace those images has been configured.

# New Card Additions

Edit reus_ecards PageBuilder reusable in Luminate.
Add new <span> tags for new eCards, set each class attribute to match the id of the eCard radio input & data-href attribute to include path to the higher resolution image.

# Progress

Donation forms now have support for the progress thermometer (opens new window). The data is computed with the middleware and retrieved from the iddlewarre via the API. To use the progress thermometer, include the following code [[S51:reus_donation_progress]] in the first caption field.

# Custom Header

To include the custom headder on the page add custom content into a container with a class prog-form-header in the first caption field. The JS code will move the custom content to the top of the page. Example page (opens new window).

# Donation Form Configuration

Edit Design Donor Screens > Donation Form.
Insert HTML Caption in the place anywhere on the page, it will be hidden by default, it can be in a section with any and all other configurations.
Place the code [[S51:reus_ecards]] into the first caption field.

# Donation Thank You Page

Click the Edit link under the Actions Column for Thank You Page to edit the Confirmation Copy presented to the donor.

The Standard Donation Confirmation page will reside in this Pagebuilder Reusable: [[S51:reus_donation_confirmation_copy]]
Awaiting Final Design of Confirmation Page in order to build. Will likely reference other reusables within the reusable noted above that way if Custom Content is required on a Confirmation Page, Jon can still reference other reusables piecemeal:
Tax Receipt Reusable
Thank You Content Reusable
Tax Disclaimer Reusable
Spread the Word Reusable
Other ways you can help Reusable

# Step 4. Validate

Click the Validate button. If the form is valid you will see '[Form Name]' is valid. message displayed.
Note: Due to copying an existing Template which fits the purpose of the new Donation Form, Forms should always validate. When the form is not valid, errors are show on this screen on how to rectify the issue. If issues exist, go back to Step 3. Design Donor Screen and make suggested edits.

# Step 5. Configure Autoresponders

For Donation Forms with One-Time and Monthly Options, ensure the two Autoresponders below are enabled (and likely set to Send the Site Default Version ). The remainder of Autoresponders will be set to Do Not Send this Autoresponder.

Standard Donation Thank You
Sustaining Initial Thank You

For Monthly Only Forms, only the Autoresponder below should be enabled. Note: If Standard Donation Thank You is enabled that will not ever send since the donations from this form will be recurring.

Sustaining Initial Thank You

If Custom Copy needs to be included in the Autoresponder(s),

Click the Switch to Customized Version link under the Actions Column
Click the Edit link under the Actions Column
Envelope
Update the Sender Name, Sender Email Address, Subject Line or Message Stationery as needed. Stationery will contain the Header (logo) and Footer (Pie Chart, Logos, Social Media, Links, Address) Elements.
Edit HTML Content
Update or include content as needed. Similar to the Confirmation Page, will likely reference reusables within the Site Default Emails that way if Custom Content is required on a Confirmation Email, Jon can still reference other reusables piecemeal:

Email Thank You Content Reusable
Email Tax Receipt Reusable
Email Tax Disclaimer Reusable

Update Plain Text
Click the Update Plain Text button and then clean up the Plain Text Content as needed for formatting or language that is not applicable in a Plain Text layout.

# Step 6. Test Drive

From this screen you can launch a Test Drive window of the Donation Form to simulate the donor experience and utilize a Test Credit.
Note: In the Preview Window, custom fonts will not be supported but that should not impact the functionality, only the look of the form.
The Autoresponder sent will not 100% be true to what a Donor will see as it's not an actual transaction – ex. Payment ID/Confirmation ID will not be displayed.
Other Testing Options: Require the form to be Published
Test the Live Form and utilize the PayPal Payment Option
Test the Live Form and utilize a real Credit Card and perform a refund after

# Step 7. Publish

Date for Publication:

Select radio button for Publish this donation form now to Publish Now or
Select radio button for Publish this donation form according to the schedule set below and set the Date and Time Note: System Time is in Central Time

Date for Unpublishing (optional): Check box for Unpublish this donation form at the time below and set the Date and Time
Note: System Time is in Central Time
Unpublished URL (optional):
If using the Unpublishing feature above would advise setting a redirect URL. The Select button will only pull up Luminate Content so you'll probably want to redirect to the STC homepage by copying and pasting in the URL.
Click Save button to Publish/Schedule the form (or any future changes) and access the form at the URL provided. Note: This will forward to the https:// version of the URL if you use the http:// URL provided or you can manually insert that when sharing the URL.

# Creating a Switching Array Donation Form

Sample: https://support.savethechildren.org/site/Donation2?df_id=1921&1921.donation=form1 (opens new window)

Note: In Initial HTML Caption or in reusable for Apple Pay Enabled Forms, set [[U0:recurringChecked=true]] to pre-select the Monthly Button (recurring) or set [[U0:recurringChecked=false]] to pre-select the One-Time button.

# Donation Levels

Navigate to Step 2. Configure Donation Levels and create the additional donation levels so there is an even amount of levels for Monthly and One-Time.

Order them so the Monthly Levels are on the Top and One-time Levels on the Bottom.
Update their level names with Monthly / One-Time prefixes accordingly for ease of identifying them in following steps.
Maintain "Other" at the bottom of the list; this user input field will be used for both gift type's array.
Publish any newly created donation levels.

# Donation Form Configuration

Navigate to Step 3. Design Donor Screens > Edit Donation Form. ̨

Add in new Section Header Data Element beneath the initial HTML Caption and set copy to: 1. Choose Your Gift Type
Add in a new HTML Caption Data Element beneath the new Section Header in 2.a. above and reference this reusable: [[S51:reus_donation__gift_type_buttons]], for button customizations see Gift Button Text article
Edit the Standard Donation Level Data Element:

Update Label from 1. to 2. Choose your gift amount
Add in Labels to each Level:
- For the Monthly/Quarterly/Annual Levels, set the label to: recurring
- For the One-Time Levels, set the label to: one-time
- This is what will control the switching of these labels in addition to the reusable above
Update the Checkbox Option Text - Optional Repeat: label to match the value in the field Fixed Frequency; see Standard Donation Level section for further details on configuration of this field

Edit the other Section Headers to increase their count by 1:

Billing > 3. Enter Your Billing Information
Payment > 4. Enter Your Payment Information
Dedication > 5. Enter Your Dedication Details (where applicable)

Remember to save all changes in every step/after every update.
Review form on front end and test switching arrays. Perform test transactions to confirm Gift Type is correct and for Recurring Gifts, that Frequency is correct.

# Add Partner Matching Gift Opt-In Checkbox

The field Joint Donor First Name must be placed on a donation form where the checkbox should appear. The field label should be changed to Matching Gift. The code will replace the text input with a checkbox & set a default label text for the checkbox.

# Remove Dollar Signs From Levels

To remove dollar signs from donation levels edit reus_content_catalog PageBuilder page. Locate section that starts with <script type="text/template" id="donation-dollar-sign">. Provide a comma-separated list of donation form id where you want to hide the dollar sign, or use keyword all to hide it on all donation forms. To disable just leave the section blank or enter [].

Example with logic for live & test sites:

<script type="text/template" id="donation-dollar-sign">
  [[?[[S29:SECURE_DOMAIN]]::support.savethechildren.org::
    [9306]
    ::
    [3624, 1620]
  ]]
</script>

# Address Suggestions

Address population suggestions (done through Smarty Streets) can be customized in reus_content_catalog PageBuilder page. Locate section that starts with <script type="text/template" id="donation-address-suggest">. Provide a comma-separated list of donation form id where you want to enable address suggetsions or use keyword all to enable it on all donation forms. To disable just leave the section blank or enter [].

Example with logic for live & test sites:

<script type="text/template" id="donation-address-suggest">
  [[?[[S29:SECURE_DOMAIN]]::support.savethechildren.org::
    [9306]
    ::
    [3624, 1620]
  ]]
</script>

← User data Donation levels →

# Copying a Template Donation Form

# Step 1. Identify Donation Form

# Form Name Format

# Step 2. Configure Donation Levels

# Step 3. Design Donor Screens

# Donation Form

# Applying a Background Image

# Alternative: Applying a Background Color

# Column Styles: One or Two Columns

# one-column

# one-column-white

# one-column-wide

# one-column-wide-white

# two-columns

# Alignment Options: Left or Right

# Right

# Left

# Recurring Only Forms: Displays Additional Language beneath Submit Button

# Setting the Heading & Image/Paragraph Text White Backgrounds to Touch

# Pre-Checking the Optional Monthly Checkbox on One-Time Forms

# No Selected Gift Type

# Intro Copy & Optional Image

# Headings

# Images

# Designated Giving Text

# Donation Levels

# Recurring Gifts

# When to Use Different Donation Levels

# Standard Donation Level

# Forever Sustainer Donation Level

# Flexible Sustainer Donation Level

# Additional Features

# eCard Replacement

# New Card Additions

# Progress

# Custom Header

# Donation Form Configuration

# Donation Thank You Page

# Step 4. Validate

# Step 5. Configure Autoresponders

# Step 6. Test Drive

# Step 7. Publish

# Creating a Switching Array Donation Form

# Donation Levels

# Donation Form Configuration

# Add Partner Matching Gift Opt-In Checkbox

# Remove Dollar Signs From Levels

# Address Suggestions

# `one-column`

# `one-column-white`

# `one-column-wide`

# `one-column-wide-white`

# `two-columns`