1. Design System
  2. Components
  3. Box with links

Box with links New

A box component with icon, heading, introduction text and up to five links used in pagebuilder widgets.

Default box with links

Open this Default box with links example in a new tab.

<div class="columns">
	<div class="column">
		<div class="box-object tile is-child box has-background-light">
			<div class="is-size-5 has-text-centered has-text-weight-bold"> <i class="far fa-check-circle fa-3x m-bottom-20"></i> <br>
			</div>
			<h2 class="is-size-3 has-text-weight-bold has-heading-line"> Box one </h2>
			<p>Introduction text</p>
			<ul>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
			</ul>
		</div>
	</div>
	<div class="column">
		<div class="box-object tile is-child box has-background-white">
			<div class="is-size-5 has-text-centered has-text-weight-bold"> <i class="fas fa-balance-scale fa-3x m-bottom-20"></i> <br>
			</div>
			<h2 class="is-size-3 has-text-weight-bold has-heading-line"> Box two </h2>
			<p>Introduction text</p>
			<ul>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
			</ul>
		</div>
	</div>
	<div class="column">
		<div class="box-object tile is-child box has-background-dark">
			<div class="is-size-5 has-text-centered has-text-weight-bold"> <i class="fas fa-box-open fa-3x m-bottom-20"></i> <br>
			</div>
			<h2 class="is-size-3 has-text-weight-bold has-heading-line"> Box three </h2>
			<p>Introduction text</p>
			<ul>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
			</ul>
		</div>
	</div>
	<div class="column">
		<div class="box-object tile is-child box has-background-primary">
			<div class="is-size-5 has-text-centered has-text-weight-bold"> <i class="fas fa-archway fa-3x m-bottom-20"></i> <br>
			</div>
			<h2 class="is-size-3 has-text-weight-bold has-heading-line"> Box four </h2>
			<p>Introduction text</p>
			<ul>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
			</ul>
		</div>
	</div>
</div>

The heading is required. The icon, introduction text and lists are optional.

Box with links options

Open this Box with links options example in a new tab.

<div class="columns">
	<div class="column">
		<div class="box-object tile is-child box has-background-light">
			<div class="is-size-5 has-text-centered has-text-weight-bold">
			</div>
			<h2 class="is-size-3 has-text-weight-bold has-heading-line"> Box one </h2>
			<p>Introduction text</p>
			<ul>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
			</ul>
		</div>
	</div>
	<div class="column">
		<div class="box-object tile is-child box has-background-white">
			<div class="is-size-5 has-text-centered has-text-weight-bold"> <i class="fas fa-balance-scale fa-3x m-bottom-20"></i> <br>
			</div>
			<h2 class="is-size-3 has-text-weight-bold has-heading-line"> Box two </h2>
			<ul>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
				<li><a href="#">Link text</a></li>
			</ul>
		</div>
	</div>
	<div class="column">
		<div class="box-object tile is-child box has-background-dark">
			<div class="is-size-5 has-text-centered has-text-weight-bold"> <i class="fas fa-box-open fa-3x m-bottom-20"></i> <br>
			</div>
			<h2 class="is-size-3 has-text-weight-bold has-heading-line"> Box three </h2>
			<p>Introduction text</p>
		</div>
	</div>
	<div class="column">
		<div class="box-object tile is-child box has-background-primary">
			<div class="is-size-5 has-text-centered has-text-weight-bold">
			</div>
			<h2 class="is-size-3 has-text-weight-bold has-heading-line"> Box four </h2>
			<p>Introduction text</p>
		</div>
	</div>
</div>

Usage

  • Don’t use generic link text. Vague text like “click here” and “read more” is confusing and repetitive, especially to screen readers. Link text should describe the destination and explain where users will go if they follow the link.

Accessibility

  • Allow keyboard navigation of links. Users should be able to navigate between links by using the “Tab” key. They should be able to activate a link by pressing the “Enter” key.