Norwegian version of this page

Bullet points in columns

Setting to split bullet lists into two or three columns on desktop.

In order to achieve a balanced view on desktop, it is often useful to divide long lists – especially link lists – into multiple columns. You can use a specific setting/class in Vortex for this purpose.

Please note that the function <div class={"left/right"}> should no longer be used with lists.

Splitting lists in front page template

To divide lists in front page template: 

  • Insert a regular bullet list/link list (<ul>) in a box
  • Set "two-column-list" or "three-column-list" in the Special settings field.

The items in the list will then be distributed across two or three columns, respectively. You can include text both above and below the list in the same box.

screenshot showing setup of bullet points list with special settings
Example: Regular link list (<ul>) in body text field, with number of columns specified in "Special settings"

Recommendations for use of the setting in various row layouts

  • works best in full-width boxes
  • can also work with two-thirds box, but then only divided into two columns. 
  • not recommended for half-width boxes
  • should not be used in boxes with one-third width

Splitting lists in other templates

List with two columns

  • Insert the following code snippet in the source code: 
    <div class="two-column-list">
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    </ul>
    </div>
    
  • In the regular view, expand the list to the desired number of items and insert the correct text and links if wanted.

List with three columns

  • Insert the following code snippet in the source code:
    <div class="three-column-list">
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    </ul>
    </div>
    
  • In the regular view, expand the list to the desired number of items and insert the correct text and links if wanted.

Examples

Link list with two columns

Link list with 3 columns

Published Mar. 22, 2024 10:25 AM - Last modified July 15, 2024 9:00 PM