One Col

Description

The one col component generates a single-column section, similar to the single column version of the hero. Using its input values, this component can be customized to suit a variety of needs.

Sample One Column, No Buttons

Rendered


This is a header

This is a body. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui.


Sample One Column, w/ Buttons and Underline

Rendered


This is a header


This is a body. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui.


Sample One Column, w/ Buttons and Image

Rendered


This is a header

This is a body. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui.


Sample One Column, w/ Buttons and Image, Inverted

Rendered


This is a header

This is a body. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui.


Options

classes : string

header : string

body : string

underline : true | false | null
If set to true, this input generates a blue, dashed line below the header.

html-section : string | HTML Entity
An optional section to insert any desired content.

primary_button : string
The copy for the primary button. Also activates display of button, when set.

primary_btn_link : string
Link for primary button. Requires primary_button to be set.

primary_btn_classes : string
Input for optional primary button classes. Requires primary_button to be set.

secondary_button : string
The copy for the secondary button. Also activates display of button, when set.

secondary_btn_link : string
Link for secondary button. Requires secondary_button to be set.

secondary_btn_classes : string
Input for optional secondary button classes. Requires secondary_button to be set.


Sample One Column, No Buttons

Code


{% include components/one-col.html header="This is a header" body="This is a body. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui." %}

Rendered


This is a header

This is a body. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui.


Sample One Column, w/ Buttons and Underline

Code


{% include components/one-col.html header="This is a header" body="This is a body. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui." primary_button="primary button" primary_btn_link="/button-link/" secondary_button="secondary button" secondary_btn_link="/button-link/" underline='true' %}

Rendered


This is a header


This is a body. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui.


Sample One Column, w/ Buttons and Image

Code


{% include components/one-col.html header="This is a header" body="This is a body. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui." primary_button="primary button" primary_btn_link="/button-link/" secondary_button="secondary button" image="illustrations/illu-worldmap3.png" secondary_btn_link="/button-link/" %}

Rendered


This is a header

This is a body. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui.


Sample One Column, w/ Buttons and Image, Inverted

Code


{% include components/one-col.html classes="inverted padding-vertical-medium" header="This is a header" body="This is a body. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui." primary_button="primary button" primary_btn_link="/button-link/" secondary_button="secondary button" image="illustrations/illu-worldmap.png" secondary_btn_link="/button-link/" %}

Rendered


This is a header

This is a body. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui.