Skip to content

Spotlight CTA

Structured call to action that supports an optional image.

Table of Contents

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

Anatomy

  1. Heading
  2. Subheading (optional)
  3. Main content slot (optional)
  4. Image (optional)
  5. Button

Usage Guidelines

Used to add prominence to a primary action on a page. An image may be provided as a preview of the result of the action (like a file), but any size images are supported.

The inner content can be used to include another paragraph of further explanation, or could list parallel secondary actions using Action Items, for example.

WordPress

The spotlight-cta Gutenberg block is available to add this component into any post content. The main content is limited to showing action-items for related program posts, but all other properties are open-ended.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
elstring HTML element to be used for the container No"aside"
headingstring Main headline text Yes-
subheadingstring Secondary heading text No-
h_levelinteger Level applied to heading element No2
h_classstring classes to apply to main heading element No-
slotstring Inner HTML content No-
imagestring Image markup content. The image element should have a class of tux-c-preview__imageNo-
buttonobjectNo-
└ labelstring Visual button text Yes-
└ screen_reader_labelstring Text to be read out for a screen reader No-
└ hrefstring URL for the button link Yes-

Styling

Modifiers

NameClassDescription
Image.tux-c-spotlight-cta--imageAlternate layout with an image

Custom Properties

NameDefaultResetsDescription
--tux-comp-spotlight-cta--border-colorvar(--tux-theme--shade-color, rgba(0, 0, 0, 0.2)Yes-

Changelog

1.34.0

  • spotlight-cta added

Contains

Other core components embedded within this template.

Examples

Default 

{% set button = {
	label: 'Learn More',
	href: '/desserts/donuts/',
	screen_reader_label: 'Main page for donuts'
} %}

<x-spotlight-cta heading="Malesuada Purus Elit Inceptos" subheading="Risus Cras Ridiculus" :button="button" />

With Image 

{% set button = {
	label: 'Learn More',
	href: '/desserts/donuts/',
	screen_reader_label: 'Main page for donuts'
} %}

<x-spotlight-cta heading="Malesuada Purus Elit Inceptos" subheading="Risus Cras Ridiculus" :button="button">
	<x-slot name="image">{{ wp_image( "abstract-placeholder-vertical.svg", 'large', false, { class: 'tux-c-spotlight-cta__image' } ) }}</x-slot>
</x-spotlight>

With Content 

{% set button = {
	label: 'Learn More',
	href: '/desserts/donuts/',
	screen_reader_label: 'Main page for donuts'
} %}

<x-spotlight-cta heading="Malesuada Purus Elit Inceptos" subheading="Risus Cras Ridiculus" :button="button">
	<ul class="tux-c-line-list tux-c-line-list--flush tux-c-line-list--outer">
		<li><x-action-item href="#example-1">Magna Egestas Venenatis Mollis</x-action-item></li>
		<li><x-action-item href="#example-2">Fermentum Dolor Quam Ligula Pharetra</x-action-item></li>
		<li><x-action-item href="#example-3">Ultricies Tellus Fusce Malesuada</x-action-item></li>
		<li><x-action-item href="#example-4">Nibh Cras</x-action-item></li>
		<li><x-action-item href="#example-5">Quam Pharetra Malesuada</x-action-item></li>
	</ul>
</x-spotlight-cta>