Program Contact Card

Contact card for program detail pages with email, phone, and mailing address.

WCAG 2.2 AA Reviewed April 2026

Design Guidance


Required	Title
Optional	Body text, phone number, email, mailing address
Limitations	Title: 50 characters max · Body text: 250 characters max

Content Guidance

Title: Sentence case, no punctuation. Communicate a benefit to the reader (e.g. "Get help paying for child care").
Body text: Sentence case, with punctuation.
Phone Numbers: Use 555-555-5555 format.
Mailing Address: Use abbreviations for address information without periods (e.g. "101 E 15th St"). Do not use periods in PO Box.

Properties: Phone number, email address, mailing addresses, text link nested properties.

Default Program Contact Card

Pathways to Progress

Have questions about this program? We're here to help. Whether you're looking for more information or want to talk through your options, reach out to our team.

Email Address program@tdoa.texas.gov

Mailing Address 101 E 15th St
Austin, TX 78701 Get Directions

Phone Number (555) 555‑5555

View HTML

<div class="txds-program-contact">
  <div class="txds-program-contact__bar"></div>
  <div class="txds-program-contact__body">
    <h3 class="txds-program-contact__name">Pathways to Progress</h3>
    <p class="txds-program-contact__description">Have questions about this program? We're here to help. Whether you're looking for more information or want to talk through your options, reach out to our team.</p>
    <div class="txds-program-contact__details">
      <div class="txds-program-contact__detail">
        <span class="txds-program-contact__detail-label">Email Address</span>
        <span class="txds-program-contact__detail-value"><a href="mailto:program@tdoa.texas.gov">program@tdoa.texas.gov</a></span>
      </div>
      <div class="txds-program-contact__detail">
        <span class="txds-program-contact__detail-label">Mailing Address</span>
        <span class="txds-program-contact__detail-text">101 E 15th St<br>Austin, TX 78701</span>
        <a class="txds-program-contact__detail-link" href="#">Get Directions</a>
      </div>
      <div class="txds-program-contact__detail">
        <span class="txds-program-contact__detail-label">Phone Number</span>
        <span class="txds-program-contact__detail-value"><a href="tel:5555555555">(555)&nbsp;555&#8209;5555</a></span>
      </div>
    </div>
  </div>
</div>

Minimal (Title + Email Only)

Child Care Services

Email Address childcare@tdoa.texas.gov

View HTML

<div class="txds-program-contact">
  <div class="txds-program-contact__bar"></div>
  <div class="txds-program-contact__body">
    <h3 class="txds-program-contact__name">Child Care Services</h3>
    <div class="txds-program-contact__details">
      <div class="txds-program-contact__detail">
        <span class="txds-program-contact__detail-label">Email Address</span>
        <span class="txds-program-contact__detail-value"><a href="mailto:childcare@tdoa.texas.gov">childcare@tdoa.texas.gov</a></span>
      </div>
    </div>
  </div>
</div>

Character Limits

Element	Limit
Title	50 characters max
Body text	250 characters max

CSS Classes

Class	Description
`txds-program-contact`	Base card container.
`txds-program-contact__bar`	Primary-colored accent bar at top.
`txds-program-contact__body`	Inner content area with padding.
`txds-program-contact__name`	Program name heading.
`txds-program-contact__description`	Optional body text describing the program.
`txds-program-contact__details`	Flex row of contact detail blocks.
`txds-program-contact__detail`	Individual contact item (email, phone, or address).
`txds-program-contact__detail-label`	Label (e.g. Email Address, Phone Number).
`txds-program-contact__detail-value`	Linked value (email or phone).
`txds-program-contact__detail-text`	Plain text value (mailing address).
`txds-program-contact__detail-link`	Action link under an address (e.g. Get Directions).