Column layout options

There are various column layouts available, which can be applied when adding a new section or when adding columns within an existing section. Examples of these options can be found below. Refer to the component pages to learn how to configure these.

Choose a layout: One column, two columns, three columns, four columns

One column 100
Two columns 25/75
Two columns 33/66
Two columns 50/50
Two columns 66/33
Two columns 75/25

Three columns 25/25/50
Three columns 25/50/25
Three columns 33/33/33
Three columns 50/25/25
Four columns 25/25/25/25

One column 100

This is a one-column (100%) layout: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae facilisis dui. Sed efficitur imperdiet ante, vitae interdum augue euismod et. Ut sed metus pellentesque, porttitor leo non, pellentesque nunc. Fusce ultrices mi nibh. Etiam non pulvinar justo, et laoreet dui. Proin at ligula quam. Aliquam augue purus, placerat in vestibulum id, scelerisque non velit. Aliquam non semper ligula, eu pharetra enim. Aenean hendrerit nibh ut neque lacinia auctor. Donec sit amet nisi vitae risus congue bibendum interdum at arcu. In suscipit turpis tellus, eu ornare diam luctus nec. Nulla eu risus lorem. Nullam dictum vel sem sit amet accumsan.

Two columns 25/75

This is a two-column 25/75 layout: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Two columns 33/66

This is a two-column 33/66 layout: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae facilisis dui. Sed efficitur imperdiet ante, vitae interdum augue euismod et. Ut sed metus pellentesque, porttitor leo non, pellentesque nunc. Fusce ultrices mi nibh. Etiam non pulvinar justo, et laoreet dui. Proin at ligula quam. Aliquam augue purus, placerat in vestibulum id, scelerisque non velit. Aliquam non semper ligula, eu pharetra enim. Aenean hendrerit nibh ut neque lacinia auctor. Donec sit amet nisi vitae risus congue bibendum interdum at arcu. In suscipit turpis tellus, eu ornare diam luctus nec. Nulla eu risus lorem.

Two columns 50/50

This is a two-column 50/50 layout: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae facilisis dui. Sed efficitur imperdiet ante, vitae interdum augue euismod et. Ut sed metus pellentesque, porttitor leo non, pellentesque nunc. Fusce ultrices mi nibh. Etiam non pulvinar justo, et laoreet dui. Proin at ligula quam. Aliquam augue purus, placerat in vestibulum id, scelerisque non velit. Aliquam non semper ligula, eu pharetra enim. Aenean hendrerit nibh ut neque lacinia auctor.

Two columns 66/33

This is a two-column 66/33 layout: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae facilisis dui. Sed efficitur imperdiet ante, vitae interdum augue euismod et. Ut sed metus pellentesque, porttitor leo non, pellentesque nunc. Fusce ultrices mi nibh. Etiam non pulvinar justo, et laoreet dui. Proin at ligula quam. Aliquam augue purus, placerat in vestibulum id, scelerisque non velit. Aliquam non semper ligula, eu pharetra enim. Aenean hendrerit nibh ut neque lacinia auctor. Donec sit amet nisi vitae risus congue bibendum interdum at arcu. In suscipit turpis tellus, eu ornare diam luctus nec. Nulla eu risus lorem.

Two columns 75/25

This is a two-column 75/25 layout: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae facilisis dui. Sed efficitur imperdiet ante, vitae interdum augue euismod et. Ut sed metus pellentesque, porttitor leo non, pellentesque nunc. Fusce ultrices mi nibh. Etiam non pulvinar justo, et laoreet dui. Proin at ligula quam. Aliquam augue purus, placerat in vestibulum id, scelerisque non velit. Aliquam non semper ligula, eu pharetra enim. Aenean hendrerit nibh ut neque lacinia auctor. Donec sit amet nisi vitae risus congue bibendum interdum at arcu. In suscipit turpis tellus, eu ornare diam luctus nec. Nulla eu risus lorem.

Three columns 25/25/50

This is a three-column 25/25/50 layout: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae facilisis dui. Sed efficitur imperdiet ante, vitae interdum augue euismod et. Ut sed metus pellentesque, porttitor leo non, pellentesque nunc. Fusce ultrices mi nibh. Etiam non pulvinar justo, et laoreet dui. Proin at ligula quam. Aliquam augue purus, placerat in vestibulum.

Three columns 25/50/25

This is a three-column 25/25/50 layout: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae facilisis dui. Sed efficitur imperdiet ante, vitae interdum augue euismod et. Ut sed metus pellentesque, porttitor leo non, pellentesque nunc. Fusce ultrices mi nibh. Etiam non pulvinar justo, et laoreet dui. Proin at ligula quam. Aliquam augue purus, placerat in vestibulum.

Three columns 33/33/33

This is a three-column 33/33/33 layout: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae facilisis dui. Sed efficitur imperdiet ante, vitae interdum augue euismod et. Ut sed metus pellentesque, porttitor leo non, pellentesque nunc.

Three columns 50/25/25

This is a three-column 50/25/25 layout: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae facilisis dui. Sed efficitur imperdiet ante, vitae interdum augue euismod et. Ut sed metus pellentesque, porttitor leo non, pellentesque nunc. Fusce ultrices mi nibh. Etiam non pulvinar justo, et laoreet dui. Proin at ligula quam. Aliquam augue purus, placerat in vestibulum.

Four columns 25/25/25/25

This is a four-column 25/25/25/25 layout: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae facilisis dui. Sed efficitur imperdiet ante, vitae interdum augue euismod et. Ut sed metus pellentesque, porttitor leo non, pellentesque nunc.

Site search