Equal-Width Column Snippets
This snippet is purely used for layout purposes. When content is placed in one of the Column Snippets, it will display that content into the number of columns that the table displays. By using these snippets, the layout also becomes responsive for different screen sizes; the columns will stack one under the other, starting with the first column on the left, and moving to the right. You can easily nest other snippets within the Column Snippet to create more dynamic and appealing content throughout your site.
Two Column Offset Snippet
Create a two-column layout where one column is wider than the other.
Offset Columns
Advanced Columns Snippet
Create more advanced column layouts, HTML experience highly recommended.
Advanced Columns
Snippet Options
ALIGN-CENTER
Controls if the columns are vertically aligned center within each column compared to the height of the other columns.
- YES
- NO
Snippet Columns
Column Content
Each column of the snippet table under Columns represents the content area of that column.
Please Note: Do not alter the number of columns on this snippet, it will not transform as you would expect it to. Select the appropriate number of columns snippet for your needs. For example, if you currently have a Three Column snippet and need a fourth column, you should add the Four Column Snippet using the wysiwyg, then move your content to it.
WYSIWYG content, nested snippets, components, and assets allowed.
Examples
Two Column Snippet
Create two equal-width responsive columns. This example is not aligned center.
Column 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.
Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.
Column 2
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.
Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.
| Two Column Snippet | |
|---|---|
| Options | |
| ALIGN-CENTER | NO |
| Columns | |
Column 1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque. |
Column 2Lorem 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. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque. |
Aligned Center
This example has less content in the second column to demonstrate aligning center.
Column 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.
Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.
Column 2
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.
| Two Column Snippet | |
|---|---|
| Options | |
| ALIGN-CENTER | YES |
| Columns | |
Column 1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque. |
Column 2Lorem 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. |
Three Column Snippet
Create three equal-width responsive columns.
Column 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.
Column 2
Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.
Column 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.
| Three Column Snippet | ||
|---|---|---|
| Options | ||
| ALIGN-CENTER | NO | |
| Columns | ||
Column 1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed. |
Column 2Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque. |
Column 3Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed. |
Four Column Snippet
Create four equal-width responsive columns.
Column 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.
Column 2
Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.
Column 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed.
Column 4
Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque.
| Four Column Snippet | |||
|---|---|---|---|
| Options | |||
| ALIGN-CENTER | NO | ||
| Columns | |||
Column 1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed. |
Column 2Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque. |
Column 3Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Sed augue lacus viverra vitae congue. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Mauris a diam maecenas sed. |
Column 4Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. Volutpat odio facilisis mauris sit amet massa vitae tortor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Fermentum odio eu feugiat pretium nibh ipsum consequat. Morbi non arcu risus quis varius quam quisque. |
Five Column Snippet
Create five equal-width responsive columns.
Column 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Column 2
Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat.
Column 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Column 4
Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat.
Column 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
| Five Column Snippet | ||||
|---|---|---|---|---|
| Options | ||||
| ALIGN-CENTER | NO | |||
| Columns | ||||
Column 1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Column 2Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. |
Column 3Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Column 4Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Aliquam faucibus purus in massa tempor nec feugiat. |
Column 5Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Six Column Snippet
Create five equal-width responsive columns.
Column 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Column 2
Semper auctor neque vitae tempus quam pellentesque nec.
Column 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Column 4
Semper auctor neque vitae tempus quam pellentesque.
Column 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Column 6
Semper auctor neque vitae tempus quam pellentesque nec nam aliquam.
| Six Column Snippet | |||||
|---|---|---|---|---|---|
| Options | |||||
| ALIGN-CENTER | NO | ||||
| Columns | |||||
Column 1Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Column 2Semper auctor neque vitae tempus quam pellentesque nec. |
Column 3Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Column 4Semper auctor neque vitae tempus quam pellentesque. |
Column 5Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Column 6Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. |
Need Assistance?
The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.
Some of the links on this page may require additional software to view.