Overview

A call to action is a styled link that entices users to make a selection.

Image of variants including Primary (red background and white text), Secondary (black border and black text), Brick (light gray border and blue text), and Default (blue text and blue icon)

Sample element

Primary

Demo

View a live version of this element to see how it can be customized.

<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css">
<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-theme/6/advanced-theme.css">
<link rel="stylesheet" href="demo.css">
<script type="module" src="rh-cta.js"></script>

<section id="variants">
<h2>Variants</h2>
<rh-cta><a href="#default">Default</a></rh-cta>
<rh-cta icon="circle-play"><a href="#default-video">Default Video</a></rh-cta>
<rh-cta variant="primary"><a href="#primary">Primary</a></rh-cta>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Video</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">Brick Icon</a></rh-cta>
</section>

<rh-context-provider id="dark" color-palette="darkest">
<h2>Dark Colour Context</h2>
<rh-cta><a href="#default">Default</a></rh-cta>
<rh-cta icon="circle-play"><a href="#default-video">Default Video</a></rh-cta>
<rh-cta variant="primary"><a href="#primary">Primary</a></rh-cta>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Video</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">Brick Icon</a></rh-cta>
</rh-context-provider>

<section dir="rtl">
<h2>Right-to-Left Languages</h2>
<rh-cta><a href="#default">ברירת מחדל</a></rh-cta>
<rh-cta icon="circle-play"><a href="#default-video">ברירת מחדל - וידאו</a></rh-cta>
<rh-cta variant="primary"><a href="#primary">ראשי</a></rh-cta>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">ראשי - וידאו</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">משני</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">לבנה</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">לבנה עם אייקון</a></rh-cta>
</section>

<section dir="rtl">
<h2>Deep Shadow RTL</h2>
<p dir="ltr">When the CTA is found within the shadow root of an element which is itself within a RTL context.</p>
<shadow-root>
<template shadowroot="open">
<style>
:host {
display: flex;
flex-flow: row wrap;
gap: 16px;
}
</style>
<rh-cta id="deep"><a href="#default">ברירת מחדל</a></rh-cta>
<rh-cta icon="circle-play"><a href="#default-video">ברירת מחדל - וידאו</a></rh-cta>
<rh-cta variant="primary"><a href="#primary">ראשי</a></rh-cta>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">ראשי - וידאו</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">משני</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">לבנה</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">לבנה עם אייקון</a></rh-cta>
</template>
</shadow-root>
</section>

<section id="resizing">
<h2>Resizing</h2>
<div class="resize">
<rh-cta><a href="#default">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta icon="circle-play"><a href="#default-video">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary"><a href="#primary">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="secondary"><a href="#secondary">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick"><a href="#brick">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick" icon="user"><a href="#brick-icon">Get product details</a></rh-cta>
</div>
</section>

<section id="resizing">
<h2>Extra-long words</h2>
<div class="resize">
<rh-cta>
<a href="#default">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta icon="circle-play">
<a href="#default-video">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary">
<a href="#primary">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary" icon="circle-play">
<a href="#primary-video">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="secondary">
<a href="#secondary">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick">
<a href="#brick">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick" icon="user">
<a href="#brick-icon">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
</section>

<section id="wrap">
<h2>Force wrap to test arrow line-wrap</h2>
<p>No matter the container size, the arrow trailing the CTA message should never appear on a line by itself.</p>
<div class="resize">
<rh-cta><a href="#default">Default link cta with longer text</a></rh-cta>
</div>
<div class="resize" dir="rtl">
<rh-cta><a href="#default">קריאה לפעולה בררית מחדל עם טקסט ארוך</a></rh-cta>
</div>
</section>

<section id="link-button" class="grid">
<h2>Link and button styles (displayed inline)</h2>
<rh-cta><a href="">Link</a></rh-cta>
<rh-cta><button>Button</button></rh-cta>

<rh-cta variant="primary"><a href="">Link</a></rh-cta>
<rh-cta variant="primary"><button>Button</button></rh-cta>

<rh-cta variant="secondary"><a href="">Link</a></rh-cta>
<rh-cta variant="secondary"><button>Button</button></rh-cta>

</section>

View the demo

When to use

  • When you need users to navigate to a different page or domain
  • When you need to arrange links in different arrangements like in a row or grid
  • When you need to hide or reveal content
© 2021-2023 Red Hat, Inc. Deploys by Netlify