Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.8)

Note

This page is archived under version 1.8 and is available for reference purposes only. The latest version of Pattern Library is 2.

CTA-block

The CTA block display information that highlights events, newsletters, or other call-to-action phrases that encourage users to perform actions.

CTA block

Demo

Text and primary CTA link

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

Text and utility CTA link

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

Code


<!-- select the theme:
	- Medium grey background (default): use the bg-medium class
	- Transparent background: use the bg-transparent class
 -->
<!-- Add the with-icon class allows to have the decorative icon in front of the text -->
<!--
	- Add the right-to-left class allows to change the text alignment from left to right.
	- Add the center class allows to change the text alignment to center
-->

<div class="cui cta-block {{ bg-medium | bg-transparent | with-icon | right-to-left | center }}">
	<div class="left-col">
		<!-- Optional icon display in front of the text -->
		<span class="{{ icon class }}" aria-hidden="true"></span>
		<p class="details">{{ Content }}</p>
	</div>
	<div class="right-col">
		<!-- Combination of call to action links -->
		<!-- Single primary CTA link-->
		<a href="#" class="cui btn-md primary">
			{{ Call to action text }}
			<span class="cicon-angle-right right" aria-hidden="true"></span>
		</a>

		<!-- Single utility CTA link-->
		<a href="#" class="cui btn-md utility-btn utility-btn-solid">Call to action</a>

		<!-- Primary CTA link with secondary text CTA link-->
		<a href="#" class="cui btn-md primary">
			{{ Call to action text }}
			<span class="cicon-angle-right right" aria-hidden="true"></span>
		</a>
		<a href="#" class="cui btn-md secondary-text">{{ Call to action text }}</a>
		<a href="#" class="cui btn-md utility-btn utility-btn-solid">{{ Call to action text }}</a>

		<!-- 2 utility CTA links -->
		<a href="#" class="cui btn-md utility-btn utility-btn-solid">Call to action</a>
		<a href="#" class="cui btn-md utility-btn utility-btn-solid">Call to action</a>

	</div>
</div>