1. Design System
  2. Components
  3. CTA blocks

CTA blocks

Blocks provide a set of content which acts as an entry point to more detailed information.

Call to action block

<div class="tile is-ancestor">
    <div class="tile is-parent">
        <a class="tile is-child item-block box has-background-primary p-20">
            <p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0"><i class="fas fa-clipboard-check fa-3x m-bottom-20"></i><br>Register for an Open Evening</p>
        </a>
    </div>
    <div class="tile is-parent">
        <a class="tile is-child item-block box has-background-primary p-20">
            <p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0"><i class="fas fa-street-view fa-3x m-bottom-20"></i><br>Campus Tours</p>
        </a>
    </div>
    <div class="tile is-parent">
        <a class="tile is-child item-block box has-background-primary p-20">
            <p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0"><i class="fas fa-paper-plane fa-3x m-bottom-20"></i><br>Request a prospectus</p>
        </a>
    </div>
    <div class="tile is-parent">
        <a class="tile is-child item-block box has-background-primary p-20">
            <p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0"><i class="fas fa-comments fa-3x m-bottom-20"></i><br>Ask a question</p>
        </a>
    </div>
</div>

The tile element has 16 modifiers:

  • 3 contextual modifiers
    • is-ancestor
    • is-parent
    • is-child
  • 1 directional modifier
    • is-vertical
  • 12 horizontal size modifiers
    • from is-1
    • to is-12

Call to action block with no icon

<div class="columns">
	<div class="column">
		<a class="tile is-child item-block box has-background-primary p-20" href="#">
			<p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0">Tools</p>
		</a>
	</div>
	<div class="column">
		<a class="tile is-child item-block box has-background-primary p-20" href="#">
			<p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0">Guidance for staff</p>
		</a>
	</div>
	<div class="column">
		<a class="tile is-child item-block box has-background-primary p-20" href="#">
			<p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0">Guidance for students</p>
		</a>
	</div>
</div>

Call to action block colours

<div class="tile is-ancestor">
    <div class="tile is-parent">
        <a class="tile is-child item-block box has-background-white p-20">
            <p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0"><i class="fas fa-clipboard-check fa-3x m-bottom-20"></i><br>Register for an Open Evening</p>
        </a>
    </div>
    <div class="tile is-parent">
        <a class="tile is-child item-block box has-background-light p-20">
            <p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0"><i class="fas fa-street-view fa-3x m-bottom-20"></i><br>Campus Tours</p>
        </a>
    </div>
    <div class="tile is-parent">
        <a class="tile is-child item-block box has-background-dark p-20">
            <p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0"><i class="fas fa-paper-plane fa-3x m-bottom-20"></i><br>Request a prospectus</p>
        </a>
    </div>
    <div class="tile is-parent">
        <a class="tile is-child item-block box has-background-primary p-20">
            <p class="is-size-5 has-text-centered has-text-weight-bold m-bottom-0"><i class="fas fa-comments fa-3x m-bottom-20"></i><br>Ask a question</p>
        </a>
    </div>
</div>

The tile element has 16 modifiers:

  • 3 contextual modifiers
    • is-ancestor
    • is-parent
    • is-child
  • 1 directional modifier
    • is-vertical
  • 12 horizontal size modifiers
    • from is-1
    • to is-12

Accessibility