Virginia Tech®home

Call to Action Link Component

The Call to Action Link component gives site creators the ability to add a link that looks like a button or to add a behavior to a page.

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

The Title and Options configuration dialog contains the following options:

  • Component Title - text input field that does not display for this component but useful for giving the component a title for keeping track of what it is used for on the page
  • CSS Class - text input field for custom CSS and/or utility classes
  • Link Text - text input field for setting the text that appears within the button
    • NOTE: Do not type text in all uppercase as some screen readers will read that as an acronym and not words.
  • Accessible Link Text - text input field for setting additional link text context to meet WCAG requirements; e.g., if the Link Text field is "Learn more", then additional accessible text may be needed to provide proper context for what the user would learn more about if they clicked the link, "Learn more about how to apply for undergarduate admissions"
  • Link URL - text field that contains a /content, https:// link or a javascript function
  • Link Style - radio button choices for a filled or outline based appearance
  • Color choices - select pulldown to choose Maroon, Orange, Dark, or Light color options
Call To Action Link Component Title and Options configuration dialog
Call To Action Link Component Title and Options configuration dialog

The Advanced Options configuration dialog contains the following options:

  • Alignment - select pulldown to choose Left, Center, Right, or Inline alignment options for the link
  • Font Family - select pulldown to choose which brand font to use for the link text
  • Opacity - select pulldown to control the opacity/ttransparency of the link; None, 60%, 70%, 80%, or 90%
  • Shadow - checkbox to set a drop shadow on the link
  • Text Uppercase - checkbox to set the link text display to all uppercase
    • NOTE: Do not type text in all uppercase as some screen readers will read that as an acronym and not words.
  • Full Width - checkbox to style the link to stretch across all available space horizontally
Call To Action Link Component Advanced Options configuration dialog
Call To Action Link Component Advanced Options configuration dialog

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

CSS Classes

  • acherus
  • btn-shadow
  • btn-transparency-60
  • btn-transparency-70
  • btn-transparency-80
  • btn-transparency-90
  • crimson
  • d-flex
  • dark
  • gineso
  • inline
  • justify-content-center
  • justify-content-end
  • justify-content-start
  • light
  • maroon
  • opacity-60
  • opacity-70
  • opacity-80
  • opacity-90
  • orange
  • outline
  • parbase
  • section
  • uppercase
  • vt-ctaLink
  • vtctalink
  • w-100