<h2> Call to action buttons </h2>

<h3> Main body buttons </h3>
<p> This is how buttons appear on a page in the main body </p>
<a href="" class="button">a tag button</a>
<button class="button">button tag button</button>
<input type="submit" id="edit-submit" name="op" value="Submit input">
<input type="button" id="edit-submit" name="op" value="Button input">

<h3> Promo buttons </h3>
<p> Promo buttons display slightly differently because they stretch to 100% when they are in the right hand column.</p>
<div class="promo--light promo">
    <h3>Promo title</h3>
    <p>Buttons in a promo box</p>
    <a class="button" target="_blank">
      a tag
  </a> </br>
    <button class="button" target="_blank">
      Button tag
  </button>
    <input type="submit" class="" name="op" value="Submit input" class="form-submit">
    <input type="button" class='promo__button' name="op" value="Button input">
    <input type="submit" class="" name="op" value="Submit input" class="form-submit" disabled>
    <input type="button" class='promo__button' name="op" value="Button input">
</div>
<p> Button promo - It occurs in the right side bar i.e. /about-us/investments. </p>
<a class="promo__button">Bondholder update (PDF 1MB)</a>
<a class="promo__button">Read our latest annual report and financial statements</a>

<h3> Disabled state </h3>
<button disabled class="button">button tag button</button>

<input type="submit" id="edit-submit" name="op" value="Submit input" class="form-submit" disabled>
<a class="button disabled" target="_blank">
  a tag
</a>
<input type="button" id="edit-submit" name="op" value="Button input" class="form-submit" disabled>

Description

A call-to-action button.

Example usage: https://wellcome.ac.uk/about-us/investments


Content notes

UX notes

Design notes

Back-end notes

Front-end notes

/* No context defined for this component. */
  • Handle: @cta-button
  • Preview:
  • Filesystem Path: ../../modules/custom/corp_markup/theme/buttons/cta_button.tpl.php/cta_button.tpl.php