Skip to content

Sticky CTA

This component is helpful for providing one to three call to actions for mobile viewports.

Table of Contents

  1. Anatomy
  2. Usage Guidelines
  3. Accessibility
  4. WordPress
  5. Specifications
    1. Properties
    2. Styling
      1. Custom Properties
  6. Changelog
  7. Related
    1. Contains
    2. Contained In
  8. Examples

Anatomy

  1. CTA Item
  2. CTA Item Icon (optional)
  3. CTA Item Label

Usage Guidelines

This component is helpful for providing one to three call to actions for mobile viewports.

Accessibility

If an icon is used, it should complement the label or otherwise not be critical for understanding the meaning of the call to action.

WordPress

A global sticky CTA can be set up in Theme Settings > Footer > Mobile Footer Menu.

Note that an item with "RFI" type will be hidden on the 404 template on landing pages.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
mobile_footer_menuarray List of linksNo-
└ itemobject ---
└ footer_menu_textstring Label text of the item--
└ footer_menu_iconstring Font Awesome icon name-false
└ footer_menu_typeobject ---
└ valuestring preset link or button markup

Allowed Values: "rfi", "email", "standard", "chat"		--
└ footer_menu_urlstring Location of item link when standard is used--
└ footer_menu_targetboolean Open item URL in new tab--
└ footer_menu_is_primaryboolean automatically adds the primary modifier to this item-false
└ footer_cta_color_pickerstring apply u-bg--{name} class to this item-false

Styling

Custom Properties

NameDefaultResetsDescription
--tux-c-sticky-cta--item-bg-colorwhiteYesDefault background color with no modifier applied to an item
--tux-c-sticky-cta--item-text-color#444YesDefault text color with no modifier applied to an item
--tux-c-sticky-cta--item-hover-bg-color#eeeYesDefault hover background color with no modifier applied to an item
--tux-c-sticky-cta--item-primary-bg-color444YesDefault background color with --primary modifier applied to an item
--tux-c-sticky-cta--item-primary-text-colorwhiteYesDefault text color with with --primary modifier applied to an item
--tux-c-sticky-cta--item-primary-hover-bg-color#333YesDefault hover background color with with --primary modifier applied to an item

Changelog

6.3.0 (2023-10-31)

  • fix: exclude chat button based on plugin config (#497) (dc53f7b)

3.2.1 (2023-05-02)

  • fix: hide standard link with href rfi along with rfi option (#413) (6280601)
  • fix: hide standard link with href tlh-form along with rfi option (#404) (16271a4)

1.35.0 (2022-06-30)

  • fix: set up variable to hide on article template (b5dfd85)

1.23.1 (2021-08-20)

  • fix: remove inherit text color on hover, focus (9ce904b)

1.16.0 (2021-02-17)

  • fix: check for both types of form components (7d16b52)
  • fix: dynamically set href for in-page forms (528f7a6)

1.13.0 (2020-11-19)

  • feat: support custom content including icons (#21) (0c669e3)

1.0.0

  • sticky-cta added

Contains

Other core components embedded within this template.

Contained In

Other components that use this component (not including freeform content slots).

Examples

Default

Apply Now Get Started Read More 
{{ include( 'components/sticky-cta.twig', {
	class: "u-static"
	options: {...}
} ) }}