Close

Box with links

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

Default box with links


Box one

Introduction text


Box two

Introduction text


Box three

Introduction text


Box four

Introduction text

<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>

Box with links options

Box one

Introduction text


Box two


Box three

Introduction text

Box four

Introduction text

<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.
  • Avoid opening links in a new tab or window. This can be disorienting for people with low vision or who are navigating via screen reader, especially when there is no warning.