Featured Cards

Cards that display a photo, linked title, short description, and an optional content tag. Hover adds a primary-50 border and card shadow.

WCAG 2.2 AA Reviewed April 2026

Design Guidance


Required	Title, description
Optional	Image, content tag
Limitations	Title: 60 characters max · Description: 80 characters max

Content Guidance

Title: Sentence case, with punctuation. Link text that tells the user where they will go.
Description: Sentence case, no punctuation. Short supporting summary.

Default Card

Access Texas Government Services Online.

Find resources and information

Resources

View HTML

<div class="txds-card">
  <div class="txds-card__media">
    <img src="/assets/images/photos/dad-kids.jpg" alt="Parent with child">
  </div>
  <div class="txds-card__body">
    <h3 class="txds-card__heading"><a href="#">Access Texas Government Services Online.</a></h3>
    <p class="txds-card__text">Find resources and information</p>
    <span class="txds-card__tag">
      <i class="bi bi-bookmark" aria-hidden="true"></i>
      Resources
    </span>
  </div>
</div>

Card Group

Access Texas Government Services Online.

Find resources and information

Resources

Apply for SNAP Benefits in Texas.

Eligibility and application help

Programs

Find WIC Clinics Near You.

Locations and hours

Services

View HTML

<div class="txds-card-group">
  <div class="txds-card">
    <div class="txds-card__media">
      <img src="/assets/images/photos/dad-kids.jpg" alt="Parent with child">
    </div>
    <div class="txds-card__body">
      <h3 class="txds-card__heading"><a href="#">Access Texas Government Services Online.</a></h3>
      <p class="txds-card__text">Find resources and information</p>
      <span class="txds-card__tag">
        <i class="bi bi-bookmark" aria-hidden="true"></i>
        Resources
      </span>
    </div>
  </div>
  <div class="txds-card">
    <div class="txds-card__media">
      <img src="/assets/images/photos/building.png" alt="Texas Capitol building">
    </div>
    <div class="txds-card__body">
      <h3 class="txds-card__heading"><a href="#">Apply for SNAP Benefits in Texas.</a></h3>
      <p class="txds-card__text">Eligibility and application help</p>
      <span class="txds-card__tag">
        <i class="bi bi-bookmark" aria-hidden="true"></i>
        Programs
      </span>
    </div>
  </div>
  <div class="txds-card">
    <div class="txds-card__media">
      <img src="/assets/images/photos/dad-kids.jpg" alt="Parent with child">
    </div>
    <div class="txds-card__body">
      <h3 class="txds-card__heading"><a href="#">Find WIC Clinics Near You.</a></h3>
      <p class="txds-card__text">Locations and hours</p>
      <span class="txds-card__tag">
        <i class="bi bi-bookmark" aria-hidden="true"></i>
        Services
      </span>
    </div>
  </div>
</div>

CSS Classes

Class	Description
`txds-card`	Base featured card (344px, gray-00 bg, 4px radius). Hover adds primary-50 border + shadow.
`txds-card__media`	Image area (225px tall, cropped).
`txds-card__body`	Content area (24px padding, 8px gap).
`txds-card__heading`	Title (20px extrabold, primary-50).
`txds-card__text`	Description (16px regular, gray-70).
`txds-card__tag`	Content tag pill (gray-10 bg, 12px semibold).
`txds-card--flag`	Horizontal layout (image left, content right).
`txds-card-group`	Grid container for multiple cards.