Two Col

Description

A two-column section with text and one or two buttons on one side, and and image (or arbitrary content) on the other side.

Basic Two Column

Rendered


This is the header

This is the subheader

This is the body


Left-Aligned, Lede, No Buttons

Rendered


This is the lede

Integrate Seamlessly

Whether you're pushing code to the cloud or on-premise, CircleCI easily integrates with GitHub and GitHub Enterprise.


Non-Image Content and Custom Button Classes

Rendered


This is the header

Customize the execution environment to match production --- use any Docker image, Linux VM, or macOS VM. Whether you’re building a website, a multi-platform mobile app, or systems software, you’ll get a clean, customizable build environment for every job.


Options

classes : string

align : left
When set to 'left' swaps the columns so that the body appears on the left and the image / display appears right.

image : string

display : string
Content to display in the non-text column instead of an image. The image and display options are mutually exclusive; display is only used when image is not included.

lede : string

header : string

subheader : string

body : string

body_type : custom
When this is set to 'custom', the value of body is included without any added formatting.

primary_button : string

primary_btn_class : string

primary_btn_link : string

primary_btn_data_attributes : string

primary_btn_optimizely_tag : string

secondary_button : string

secondary_btn_class : string

secondary_btn_link : string

secondary_btn_data_attributes : string

secondary_btn_optimizely_tag : string


Basic Two Column

Code


{% include components/two-col.html image="illustrations/illu-worldmap.png" header="This is the header" subheader="This is the subheader" body="This is the body" primary_button="Primary Button!" primary_btn_link="#" secondary_button="Secondary Button!" secondary_btn_link="#" %}

Rendered


This is the header

This is the subheader

This is the body


Left-Aligned, Lede, No Buttons

Code


{% include components/two-col.html align="left" header="Integrate Seamlessly" lede="This is the lede" body="Whether you're pushing code to the cloud or on-premise, CircleCI easily integrates with GitHub and GitHub Enterprise." image="integrations/github/illu-gh-integrate.png" %}

Rendered


This is the lede

Integrate Seamlessly

Whether you're pushing code to the cloud or on-premise, CircleCI easily integrates with GitHub and GitHub Enterprise.


Display and Custom Button Classes

Code


{% include components/two-col.html header="This is the header" body="Customize the execution environment to match production --- use any Docker image, Linux VM, or macOS VM. Whether you’re building a website, a multi-platform mobile app, or systems software, you’ll get a clean, customizable build environment for every job." primary_button="Learn More" primary_btn_class="btn-secondary" primary_btn_link="#" display="<iframe class='map' style='width: 100%;' src='https://www.google.com/maps/embed/v1/place?q=201%20Spear%20Street%20Suite%201200%20San%20Francisco%2C%20CA%20%2094105&key=AIzaSyAxu-N9iubD2uLJ7pbukPYhD6YyedJwf4E'></iframe>" %}

Rendered


This is the header

Customize the execution environment to match production --- use any Docker image, Linux VM, or macOS VM. Whether you’re building a website, a multi-platform mobile app, or systems software, you’ll get a clean, customizable build environment for every job.