Skip to main content

Call to Action Links

To style a call to action link, add the class cta

Apply for this program
With .dark-blue class
With .small and .light-green class
Contains a pdf
Contains a Word doc and is small
Contains a Excel doc
Contains a PowerPoint doc 
<a href="#" class="cta dark-blue">With .dark-blue class</a>
<a href="#" class="cta small light-green">With .small and .light-green class</a>

<a href="something.pdf" class="cta">Contains a pdf</a>
<a href="something.docx" class="cta">Contains a Word doc</a>
<a href="something.xlsx" class="cta">Contains a Excel doc</a>
<a href="something.pptx" class="cta">Contains a PowerPoint doc</a>

CTAs with Icons​

You can customize the icon in your CTA with material icons. This behavior is easiest when using Drupal block types—just use the included field. Material Icons are not included by default, so if you need to hard code links this way, you will need to load the library on that page via another method such as including another block that has it included, adding it to a view, or adding a <link> tag to the page via HTML.

With an Icon
Small with an Icon 
<a href="#" class="cta with-icon"><span class="material-icons" aria-hidden="true">accessibility_new</span> With an Icon</a>
<a href="#" class="cta small with-icon"><span className="material-icons" aria-hidden="true">park</span> Small with an Icon</a>

Round CTAs​

A style variant that is available on Drupal Call to Action Link block types. Like CTAs with Icons, these make use of the material icons library, so if you are hard coding this you will need to load that library separately. Text space is limited, if your text doesn't fit you may want to consider someting like an image link or card instead.

Round CTA Small Round CTA 
<a href="#" class="round-cta blue"><span class="material-icons" aria-hidden="true">accessibility_new</span><span className="text">Round CTA</span></a>
<a href="#" class="round-cta dark-blue small"><span className="material-icons" aria-hidden="true">park</span><span className="text">Small Round CTA</span></a>

Inline CTAs​

Inline CTAs are useful for when you want to draw a little extra attention to a link without removing it from the flow of text.

Still exploring? Contact Admissions to Request More Information.

Still exploring? Contact Admissions to <a href="#" class="inline-cta">Request More Information</a>.