Styles

• Lists
• Definition lists
• Text

Lists

A selection of styles for unordered lists.

Icon list

A simple <ul> with icons as bullets. Icon sizing are relative to font size. With an option to make the icons larger if needed.

Open this example in a new tab

HTML

<ul class="govuk-list das-icon-list">
	<li class="das-icon-list__list-item">
		<span class="das-icon-list__icon das-icon-list__icon--tick">Yes: </span>day release
	</li>
	<li class="das-icon-list__list-item">
		<span class="das-icon-list__icon das-icon-list__icon--cross">No: </span>block release
	</li>
	<li class="das-icon-list__list-item">
		<span class="das-icon-list__icon das-icon-list__icon--tick">Yes: </span>at your location
	</li>
</ul>

Larger icons

Open this example in a new tab

HTML

<ul class="govuk-list das-icon-list das-icon-list--large">
	<li class="das-icon-list__list-item">
		<span class="das-icon-list__icon das-icon-list__icon--cross">No: </span>day release
	</li>
	<li class="das-icon-list__list-item">
		<span class="das-icon-list__icon das-icon-list__icon--cross">No: </span>block release
	</li>
	<li class="das-icon-list__list-item">
		<span class="das-icon-list__icon das-icon-list__icon--tick">Yes: </span>at your location
	</li>
</ul>

Inline list

Displays each list item inline rather than on a new line.

Pipe

Open this example in a new tab

HTML

<ul class="das-inline-list das-inline-list--bar">
    <li>Delivery address</li>
    <li>Payment</li>
    <li>Confirmation</li>
</ul>

Comma

Open this example in a new tab

HTML

<ul class="das-inline-list das-inline-list--comma">
    <li>Delivery address</li>
    <li>Payment</li>
    <li>Confirmation</li>
</ul>