Utah.gov - An official website

Lists

Lists: Two columns

NOTE: Two columns can be applied universally to a parent, not just list items.

List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 
<div class="list--with-image two-column">
	<a href="#" class="list--item">
		<img src="../img/services/def-utgov.png" alt="List Item">
		<div>
			<h3>List Item Name</h3>
			<p class="subtitle">Department/Agency Name</p>
			<p class="description">Description</p>
		</div>
	</a>
</div>

<ul class="two-column">
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
</ul>

Lists with Images: Default

List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 
<div class="list--with-image">
	<a href="#" class="list--item">
		<img src="../img/services/def-utgov.png" alt="List Item">
		<div>
			<h3>List Item Name</h3>
			<p class="subtitle">Department/Agency Name</p>
			<p class="description">Description</p>
		</div>
	</a>
</div>

Lists with Images: Small

List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 
<div class="list--with-image image--small">
	<a href="#" class="list--item">
		<img src="../img/services/def-utgov.png" alt="List Item">
		<div>
			<h3>List Item Name</h3>
			<p class="subtitle">Department/Agency Name</p>
			<p class="description">Description</p>
		</div>
	</a>
</div>

Lists with Images: Large

List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 
<div class="list--with-image image--large">
	<a href="#" class="list--item">
		<img src="../img/services/def-utgov.png" alt="List Item">
		<div>
			<h3>List Item Name</h3>
			<p class="subtitle">Department/Agency Name</p>
			<p class="description">Description</p>
		</div>
	</a>
</div>

List with Item Border

<ul class="borderLeft">
	<li>
		<h3>State Capitol</h3>
		<p>Salt Lake City</p>
	</li>
</ul>

Lists: Masonry Style

List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 List Item

List Item Name

Department/Agency Name

Description

 
<div class="list--with-image masonry-column">
	<a class="list--item">
		<img src="../img/services/def-utgov.png" alt="List Item">
		<div>
			<h3>List Item Name</h3>
			<p class="subtitle">Department/Agency Name</p>
			<p class="description">Description</p>
		</div>
	</a>
	[...]
</div>

List of Profiles

{{personName}}

Title

Name of Person
{{personName}}

Title

Name of Person
{{personName}}

Title

Name of Person

 
<div class="profiles">
	<div class="profile person">
		<a href="#" rel="noopener noreferrer">
			<img src="../img/people/profile-placeholder.png" alt="Name of Person">
			<p class="title">Title</p>
			<p class="name">Name of Person</p>
		</a>
		<div class="socialMediaAccounts">
			<a href="#" class="socialMedia" rel="noopener noreferrer" aria-label="Facebook">>{{Include link to SVG Logo}}</a>
			<a href="#" class="socialMedia" rel="noopener noreferrer" aria-label="Twitter">>{{Include link to SVG Logo}}</a>
			<a href="#" class="socialMedia" rel="noopener noreferrer" aria-label="Instagram">>{{Include link to SVG Logo}}</a>
		</div>
	</div>
</div>