Virginia Tech™home

Call to Action Link Component

The Call to Action Link component gives site creators the ability to add an eye-catching link to the page. These links are meant to entice users to take an action, such as applying, visiting, donating, or requesting information, among other uses.

 

The link can be styled in various different ways based on the selected properties:

Default Call to Action Link properties
Default Call to Action Link properties: advanced options tab
Default Call to Action Link state

 

Example

Call to Action Link properties. color: orange. link text: apply now
Call to Action Link properties. outline: checked. shadow: checked. text uppercase: checked
button component example: outline, orange, text uppercase

Generated html:

<div class="parbase section vtctalink">

    <a class="vt-button orange btn-shadow uppercase" href="/content/vt_edu/en/about">Apply now</a>

</div>  


The Call to Action Link gives site creators the ability to add an eye-catching link to the page. These links are meant to entice users to take an action, such as applying, visiting, donating, or requesting information, among other uses.

Features

  • Custom link text
  • Design options including placement, color, style, font, etc.
  • Custom accessible label

Dialog Properties

Title and Options

  1. Component Title - Title of Component
  2. CSS Class - CSS class to be applied to the component
  3. Link Text - The display text of the link
  4. Accessible Link Text - Text that will only be available to a screen reader. Useful if link text needs to be something like "Learn more"
  5. Link URL - The url for the link
  6. Link Style - The general style theme of the link
    • Filled - A solid fill background color
    • Outline - A strong, colored border and text, but no background color
  7. Color choices - There are several color options
    • Maroon
    • Orange
    • Dark
    • Light

Advanced Options

  1. Alignment - Snaps the link to a certain position
    • Left - align link to the left edge of the row
    • Center - align link to the center of the row
    • Right - align link to the right edge of the row
    • Inline - link will flow with other elements on the same line
  2. Font Family - Several font choices are available
    • Gineso Condensed - Condensed sans-serif
    • Acherus Grotesque - Normal sans-serif
    • Crimson Text - Normal serif
  3. Opacity - The translucence of the link, measured in percentages
    • None
    • 60% - 60% visible
    • 70% - 70% visible
    • 80% - 80% visible
    • 90% - 90% visible