Featured Banner

A full-width promotional strip used to highlight a featured service or program with a title, optional description, and call-to-action button.

WCAG 2.2 AA Reviewed April 2026

View full-width preview

Design Guidance


Required	Title, button
Optional	Body text
Limitations	Title: 50 characters max · Body text: 220 characters max · Button: 30 characters max

Content Guidance

Title: Sentence case, no punctuation.
Body text: Sentence case, with punctuation.
Button: Sentence case, no punctuation. Start with a verb. Use "View" instead of "See".

Mobile — Simple

View HTML

<div class="txds-featured-banner txds-featured-banner--simple">
  <div class="txds-featured-banner__inner">
    <h2 class="txds-featured-banner__title">Looking for support? We're here to help.</h2>
    <a href="#" class="txds-featured-banner__action">Explore Services</a>
  </div>
</div>

Mobile — With Description

View HTML

<div class="txds-featured-banner txds-featured-banner--alt">
  <div class="txds-featured-banner__inner">
    <div class="txds-featured-banner__content">
      <h2 class="txds-featured-banner__title">Let us know what you think.</h2>
      <p class="txds-featured-banner__text">Did you find the information you're looking for?<br>Your feedback helps us improve TDOA.</p>
    </div>
    <a href="#" class="txds-featured-banner__action">Complete Survey</a>
  </div>
</div>

CSS Classes

Class	Description
`txds-featured-banner`	Base banner container (gray-00 background, centered content).
`txds-featured-banner--alt`	Alternate gray-20 background.
`txds-featured-banner--simple`	Two-item layout (title + button side by side, centered).
`txds-featured-banner__inner`	Flex row wrapper for content and action.
`txds-featured-banner__content`	Title and optional description text block.
`txds-featured-banner__title`	H3-level heading (32px bold).
`txds-featured-banner__text`	Optional body text (18px).
`txds-featured-banner__action`	Outlined CTA button (primary-50 border).