Spotlight CTA
Anatomy
- Heading
- Subheading (optional)
- Main content slot (optional)
- Image (optional)
- 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
| Property | Type | Description | Required | Default |
|---|---|---|---|---|
| el | string | HTML element to be used for the container | No | "aside" |
| heading | string | Main headline text | Yes | - |
| subheading | string | Secondary heading text | No | - |
| h_level | integer | Level applied to heading element | No | 2 |
| h_class | string | classes to apply to main heading element | No | - |
| slot | string | Inner HTML content | No | - |
| image | string | Image markup content. The image element should have a class of tux-c-preview__image | No | - |
| button | object | No | - | |
| └ label | string | Visual button text | Yes | - |
| └ screen_reader_label | string | Text to be read out for a screen reader | No | - |
| └ href | string | URL for the button link | Yes | - |
Styling
Modifiers
| Name | Class | Description |
|---|---|---|
| Image | .tux-c-spotlight-cta--image | Alternate layout with an image |
Custom Properties
| Name | Default | Resets | Description |
|---|---|---|---|
--tux-c-spotlight-cta--border-color | var(--tux-theme--shade-color, rgba(0, 0, 0, 0.2) | Yes | - |
Changelog
6.16.2 (2024-10-30)
1.34.0
- spotlight-cta added
Related
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>