List - Additional styles - GCWeb theme V5

The following styles are an addition to list styling availble in WET-BOEW Style Guide and it is exclusive to GCWeb v5 theme

List double spaced .lst-spcd-2

• Item
• Item
• Item
• Item
• Item

Source code

<ul class="lst-spcd-2">
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
</ul>

Lists in columns .list-col-[breakpoint]-[columns]

Add the class list-col-[breakpoint]-[columns] to display any list in a column format, where [breakpoint] can be either xs, sm, md or lg and [columns] can be either 1, 2, 3 or 4

The smallest breakpoint defined will affect its breakpoint and all breakpoints above unless a larger breakpoint is defined. For example list-col-sm-2 will display the list in two (2) columns for the sm, md and lg breakpoints. The default number of columns is one (1), so, in this example, the list would be displayed in one column for the xs breakpoint.

Classes can be combined to display the items in a different amount of columns for different breakpoints. See following example.

• Item
• Item
• Item
• Item
• Item
• Item
• Item
• Item
• Item
• Item
• Item
• Item

Source code

<ul class="list-col-xs-1 list-col-sm-2 list-col-md-3 list-col-lg-4">
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
</ul>