Edinburgh GEL

Calls to action

A call to action button emphasises to the user what the primary action is on a page.

The call to action button should clearly stand out from other page elements and is customisable through user options.

Accessibility review

Not completed yet.

Notes: The icon is decorative and will not always add meaning to the call to action so it is hidden using aria values for improved accessibility purposes. 

Choose a colour

Update
You are viewing the colour: Red (default), hex-value: #d50032

Choose viewport

      
<h2>Call to action (solid button style)</h2>
<p>Note - Use button styling on a href link element. Button should use the large option and call on the the active EdWeb theme colour. The icon is decorative and will not always add meaning so it is hidden using aria values for improved accessibility purposes. An additional class is needed for an optional inverted styling. Bootstrap 4 has a new outline style. A UoE colour themed version of this option would ideal for the inverted or outline styling. See <a href="http://v4-alpha.getbootstrap.com/components/buttons/#outline-buttons">Button outline</a></p>
<a href="+" class="btn btn-uoe btn-lg btn-cta">
<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Download our guide</a>

<p>&nbsp;</p>

<a href="+" class="btn btn-uoe btn-lg btn-cta">
<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Find us</a>

<p>&nbsp;</p>
<h3>Call to action (block button style)</h3>
<p>Can this be applied as an additional style type? eg Solid, Outline and block</p>
<a href="+" class="btn btn-uoe btn-lg btn-block btn-cta btn-outline">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Larger optional block style call to action</a>

<p>&nbsp;</p>
<h3>Call to action (outline button style)*</h3>
<p>* not sure additional styles added via GEL are being applied. Not been able to test yet.</p>
<a href="+" class="btn btn-uoe btn-lg btn-cta btn-outline">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Contact us</a>




<h2>Deprecated: Headscape proposed CTA styles</h2>
<p>Note: uses list element which semantically is wrong for our use case. Also the elements are presented block style which are not always appropriate for our design layouts.</p>

<h3>Dark</h3>
<p>
<ul class="cta ctaPairs">
  <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>Link name 1 </a></li>
  <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>Link name 2</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>Link name 3 </a></li>
</ul>
</p>
<p>&nbsp;</p>
<h3>Light</h3>
<p><ul class="cta inverted">
  <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>Link name 1 </a></li>
  <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>Link name 2</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>Link name 3</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>Link name 4 </a></li>
  <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>Link name 5</a></li>
</ul></p>
<p>&nbsp;</p>
<p>&nbsp;</p>