Blogs Style Guide: Columns

Column Configuration

Two Even Columns

Suspendisse at faucibus enim. Praesent tincidunt elementum vulputate. Suspendisse a arcu tempor, dignissim felis cursus, eleifend metus. Vivamus non ligula ligula.

Pellentesque laoreet sit amet dolor at lacinia. Morbi faucibus massa purus, blandit tincidunt nulla ullamcorper sit amet. Quisque malesuada gravida odio, vitae pulvinar libero pharetra iaculis.

One-Third Two-Third Columns

Suspendisse at faucibus enim. Praesent tincidunt elementum vulputate. Suspendisse a arcu tempor, dignissim felis cursus, eleifend metus. Vivamus non ligula ligula.

Pellentesque laoreet sit amet dolor at lacinia. Morbi faucibus massa purus, blandit tincidunt nulla ullamcorper sit amet. Quisque malesuada gravida odio, vitae pulvinar libero pharetra iaculis.

Two-Third One-Third Columns

Suspendisse at faucibus enim. Praesent tincidunt elementum vulputate. Suspendisse a arcu tempor, dignissim felis cursus, eleifend metus. Vivamus non ligula ligula.

Pellentesque laoreet sit amet dolor at lacinia. Morbi faucibus massa purus, blandit tincidunt nulla ullamcorper sit amet. Quisque malesuada gravida odio, vitae pulvinar libero pharetra iaculis.

Three Columns With Wide Center Column

Suspendisse at faucibus enim. Praesent tincidunt elementum vulputate. Suspendisse a arcu tempor, dignissim felis cursus, eleifend metus. Vivamus non ligula ligula.

Pellentesque laoreet sit amet dolor at lacinia. Morbi faucibus massa purus, blandit tincidunt nulla ullamcorper sit amet. Quisque malesuada gravida odio, vitae pulvinar libero pharetra iaculis.

Quisque ultricies, nisi ut molestie consequat, enim mauris suscipit neque, in eleifend tortor eros nec metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Instructions

  1. Insert the Column block, found in the Layout Elements section.
  2. Select the desired layout.
  3. Add desired content to each column.

Border and Alerts

Border on Columns Block

Column 1

Column 2

Border on Columns Block (Alert)

Column 1

Column 2

Border on Individual Column

Column 1

Column 2

Column 1

Column 2

Border on Individual Column (Alert)

Column 1

Column 2

Column 1

Column 2

Instructions

  1. After inserting the columns and adding the desired content, choose the outer main block to add one border around the whole thing or choose the specific column that you want to add a border to.
  2. Choose the desired border option from the Styles accordion in the Block Settings.

Comments Closed