Explore the system

Get started

Get the tools and building blocks to design and develop consistent and accessible experiences.

Start developing Start designing

Calls to action

Calls to action encourage users to take specific actions.

Guidance

A call to action (CTA) is a button or link that encourages a user to take a specific action. It's important to use CTAs sparingly and make sure they are relevant and appropriate for the context in which they are being used. Overusing CTAs or using them inappropriately can be annoying or confusing for users and may decrease their effectiveness. Examples of appropriate user actions are signing up for a newsletter, downloading a file, or starting an application.

Do

  • Clearly convey what action the user will be taking when they click on it.
  • Use actionable and descriptive language, and words that inspire action, such as "Sign up," or "Get started."
  • Place calls to action where they are easy for users to see and interact with.

Don’t

  • Don’t use misleading calls to action. This will confuse and frustrate the user.
  • Don’t use too many calls to action. This can be annoying or confusing for users and may decrease their effectiveness.
  • Custom background images must not contain text, logos, illustrations or appear blurry, distorted or pixelated.

Call to action

The default call to action component is used within a page's content. It will resize to its parent column or container, and can be used in a sidebar. Use a <h2>, <h3> or <h4> heading within your call to action, depending on the page's content structure.

Lorem ipsum dolor

Sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem.

Primary button

HTML

<div class="gnb-call-to-action">
	<h3>Lorem ipsum dolor</h3>
	<p>Sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem.</p>
	<p>
		<a href="#" class="gnb-btn">Primary button</a>
	</p>
</div>

Call to action section

This is a full width component. You must close any preceding sections and containers in your HTML before using a call to action section. Because this component begins a new page section, you must use an <h2> level heading.

Lorem ipsum dolor

Sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem.

Primary button

HTML

<section class="gnb-call-to-action-section">
	<div class="container">
		<h2>Lorem ipsum dolor</h2>
		<p>Sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum
			lorem.
		</p>
		<p>
			<a href="" class="gnb-btn">Primary button</a>
		</p>
	</div>
</section>

Call to action section with image

This is a full width component. You must close any preceding sections and containers in your HTML before using a call to action section with image.

Add your custom background image using inline CSS. Your image will resize to the width of the screen. The ideal image size is between 1440px and 1920px wide, a maximum of 1080px tall, and optimized to be 160kb or less. This component will add a black overlay to ensure there is enough contrast between the image and text, however light or bright images are not recommended. Your custom image must not contain text, logos, illustrations or appear blurry, distorted or pixelated.

You can use a free, open-source online tool like Squoosh to crop, optimize and resize your images.

Lorem ipsum sit amet, consectetur adipiscing elit purus semper, accumsan erate lorem.

Primary button

HTML

<section class="gnb-call-to-action-section-img" style="background-image: url(../img/your-image.jpg)">
	<div class="container">
		<div class="row row-cols-1 row-cols-lg-2">
			<div class="col">
				<p class="h2">Lorem ipsum sit amet, consectetur adipiscing elit purus semper, accumsan erate lorem.</p>
				<p>
					<a href="#" class="gnb-btn">Primary button</a>
				</p>
			</div>
		</div>
	</div>
</section>