Skip to main content
Texas Design System

Search Results and Directory Listings

Search result items with title, description, and date. Large, Small, and Directory variants.
WCAG 2.2 AA Reviewed April 2026 Accessibility notes

Design Guidance
Required Title, description
Optional External link icon, date, action button, thumbnail, contact details

When to Use Each Variant

Variant Use when
Default — Large For use on long titles and short descriptions. Standard content pages, policies, forms, and documents.
Default — Small For use on short titles and longer descriptions. Use when a follow-up action (e.g. "View full policy") is needed.
Program — With Image Event or program detail listings where an agency logo or thumbnail helps identify the program at a glance.
Program — No Image Event or program search results without a visual asset. Matches the standard search results page pattern.
Directory Staff, agency, or contact directory listings. Use when results contain contact information (email, phone, or link) instead of a description.

Default — Large

Policy and Privacy Statement

Last updated: July 12, 2025 4:07 PM

Your privacy matters to us, and we maintain strict policies to safeguard your information whenever you interact with agency services or digital tools on our website.

View HTML 
<div class="txds-search-result txds-search-result--large">
  <div class="txds-search-result__header">
    <div class="txds-search-result__icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
    </div>
    <h3 class="txds-search-result__title"><a href="#">Policy and Privacy Statement</a></h3>
    <div class="txds-search-result__date">
      <span class="txds-search-result__date-label">Last updated:</span>
      <span class="txds-search-result__date-value">July 12, 2025 4:07 PM</span>
    </div>
  </div>
  <p class="txds-search-result__description">Your privacy matters to us, and we maintain strict policies to safeguard your information whenever you interact with agency services or digital tools on our website.</p>
</div>

Default — Small

Last updated: July 12, 2025 4:07 PM

Your privacy matters to us, and we maintain strict policies to safeguard your information whenever you interact with agency services or digital tools on our website.

View HTML 
<div class="txds-search-result txds-search-result--small">
  <div class="txds-search-result__header">
    <div class="txds-search-result__title-wrap">
      <div style="display:flex;gap:24px;flex:1 1 350px;min-width:0;align-items:flex-start">
        <div class="txds-search-result__icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
        </div>
        <h3 class="txds-search-result__title"><a href="#">Policy and Privacy Statement</a></h3>
      </div>
      <div class="txds-search-result__date">
        <span class="txds-search-result__date-label">Last updated:</span>
        <span class="txds-search-result__date-value">July 12, 2025 4:07 PM</span>
      </div>
    </div>
  </div>
  <p class="txds-search-result__description">Your privacy matters to us, and we maintain strict policies to safeguard your information whenever you interact with agency services or digital tools on our website.</p>
</div>

Program — With Image

Texas Department of Agency

Policy and Privacy Statement

Last updated: July 12, 2025 4:07 PM

Your privacy matters to us, and we maintain strict policies to safeguard your information whenever you interact with agency services or digital tools on our website.

Meeting Start:

May 17, 2025 10:00:00 AM

Meeting End:

May 18, 2025 10:00:00 AM

Meeting Location:

Texas Department of Agency
101 E. 15th St., Rm 555
Austin, TX 78701

Phone Number:

(555) 555‑5555

View HTML 
<div class="txds-search-result txds-search-result--program">
    <a href="#" class="txds-search-result__thumbnail">
      <img src="/assets/images/agency-logo.svg" alt="Texas Department of Agency" width="209" height="32">
    </a>
  <div class="txds-search-result__body">
    <div class="txds-search-result__header">
      <div class="txds-search-result__title-wrap">
        <h3 class="txds-search-result__title"><a href="#">Policy and Privacy Statement</a></h3>
        <div class="txds-search-result__date">
          <span class="txds-search-result__date-label">Last updated:</span>
          <span class="txds-search-result__date-value">July 12, 2025 4:07 PM</span>
        </div>
      </div>
    </div>
    <p class="txds-search-result__description">Your privacy matters to us, and we maintain strict policies to safeguard your information whenever you interact with agency services or digital tools on our website.</p>
    <div class="txds-search-result__details">
      <div class="txds-search-result__detail">
        <p class="txds-search-result__detail-label">Meeting Start:</p>
        <p class="txds-search-result__detail-value">May 17, 2025 10:00:00 AM</p>
        <p class="txds-search-result__detail-label" style="margin-top:8px">Meeting End:</p>
        <p class="txds-search-result__detail-value">May 18, 2025 10:00:00 AM</p>
      </div>
      <div class="txds-search-result__detail">
        <p class="txds-search-result__detail-label">Meeting Location:</p>
        <p class="txds-search-result__detail-value">
          <a href="#">Texas Department of Agency<br>101 E. 15th St., Rm 555<br>Austin, TX 78701</a>
        </p>
      </div>
      <div class="txds-search-result__detail">
        <p class="txds-search-result__detail-label">Phone Number:</p>
        <p class="txds-search-result__detail-value"><a href="tel:5555555555">(555)&nbsp;555&#8209;5555</a></p>
      </div>
    </div>
  </div>
</div>

Program — No Image

Policy and Privacy Statement

Last updated: July 12, 2025 4:07 PM

Your privacy matters to us, and we maintain strict policies to safeguard your information whenever you interact with agency services or digital tools on our website.

Meeting Start:

May 17, 2025 10:00:00 AM

Meeting End:

May 18, 2025 10:00:00 AM

Meeting Location:

Texas Department of Agency
101 E. 15th St., Rm 555
Austin, TX 78701

Phone Number:

(555) 555‑5555

View HTML 
<div class="txds-search-result txds-search-result--program">
  <div class="txds-search-result__body">
    <div class="txds-search-result__header">
      <div class="txds-search-result__icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
      </div>
      <div class="txds-search-result__title-wrap">
        <h3 class="txds-search-result__title"><a href="#">Policy and Privacy Statement</a></h3>
        <div class="txds-search-result__date">
          <span class="txds-search-result__date-label">Last updated:</span>
          <span class="txds-search-result__date-value">July 12, 2025 4:07 PM</span>
        </div>
      </div>
    </div>
    <p class="txds-search-result__description">Your privacy matters to us, and we maintain strict policies to safeguard your information whenever you interact with agency services or digital tools on our website.</p>
    <div class="txds-search-result__details">
      <div class="txds-search-result__detail">
        <p class="txds-search-result__detail-label">Meeting Start:</p>
        <p class="txds-search-result__detail-value">May 17, 2025 10:00:00 AM</p>
        <p class="txds-search-result__detail-label" style="margin-top:8px">Meeting End:</p>
        <p class="txds-search-result__detail-value">May 18, 2025 10:00:00 AM</p>
      </div>
      <div class="txds-search-result__detail">
        <p class="txds-search-result__detail-label">Meeting Location:</p>
        <p class="txds-search-result__detail-value">
          <a href="#">Texas Department of Agency<br>101 E. 15th St., Rm 555<br>Austin, TX 78701</a>
        </p>
      </div>
      <div class="txds-search-result__detail">
        <p class="txds-search-result__detail-label">Phone Number:</p>
        <p class="txds-search-result__detail-value"><a href="tel:5555555555">(555)&nbsp;555&#8209;5555</a></p>
      </div>
    </div>
  </div>
</div>

Directory

Policy and Privacy Statement

Your privacy matters to us, and we maintain strict policies to safeguard your information whenever you interact with agency services or digital tools on our website.

Contact link:

Contact us

Email address:

ahamilton@tdoa.texas.gov

Phone Number:

(555) 242‑3399

View HTML 
<div class="txds-search-result txds-search-result--directory">
  <div class="txds-search-result__body">
    <div class="txds-search-result__header">
      <div class="txds-search-result__icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
      </div>
      <h3 class="txds-search-result__title"><a href="#">Policy and Privacy Statement</a></h3>
    </div>
    <p class="txds-search-result__description">Your privacy matters to us, and we maintain strict policies to safeguard your information whenever you interact with agency services or digital tools on our website.</p>
    <div class="txds-search-result__details">
      <div class="txds-search-result__detail">
        <p class="txds-search-result__detail-label">Contact link:</p>
        <p class="txds-search-result__detail-value"><a href="#">Contact us</a></p>
      </div>
      <div class="txds-search-result__detail">
        <p class="txds-search-result__detail-label">Email address:</p>
        <p class="txds-search-result__detail-value"><a href="mailto:ahamilton@tdoa.texas.gov">ahamilton@tdoa.texas.gov</a></p>
      </div>
      <div class="txds-search-result__detail">
        <p class="txds-search-result__detail-label">Phone Number:</p>
        <p class="txds-search-result__detail-value"><a href="tel:5552423399">(555)&nbsp;242&#8209;3399</a></p>
      </div>
    </div>
  </div>
</div>

CSS Classes

Class Description
txds-search-result Base container for a single search result.
txds-search-result--large Large variant — bold linked title with description.
txds-search-result--small Small variant — larger title, smaller description, optional button.
txds-search-result--program Program variant — includes thumbnail, meeting details, location, phone.
txds-search-result--directory Directory variant — shows contact link, email, and phone number.
txds-search-result__header Row containing the external icon, title, and date.
txds-search-result__icon External link icon wrapper.
txds-search-result__title Linked search result title.
txds-search-result__date "Last updated" date area.
txds-search-result__description Truncated description text with 3-line clamp.
txds-search-result__details Flex row for contact details (Directory variant).
txds-search-result__detail Individual detail group with label and value.