What We Do

Icon, title, and description blocks used to highlight key programs and services. Supports vertical and horizontal layouts.

WCAG 2.2 AA Reviewed April 2026

Vertical Layout

Personal and Professional Support

Get guidance and resources for personal development, educational planning, life skills, and preparing for career opportunities.

Education and Care Resources

Access up-to-date guidance on care, learning opportunities, and support programs.

View HTML

<div class="txds-benefits">
  <div class="txds-benefits__grid">
    <div class="txds-benefit">
      <div class="txds-benefit__icon">
        <i class="bi bi-layers" aria-hidden="true"></i>
      </div>
      <h3 class="txds-benefit__title">Personal and Professional Support</h3>
      <p class="txds-benefit__text">Get guidance and resources for personal development, educational planning, life skills, and preparing for career opportunities.</p>
    </div>
    <div class="txds-benefit">
      <div class="txds-benefit__icon">
        <i class="bi bi-journal-bookmark" aria-hidden="true"></i>
      </div>
      <h3 class="txds-benefit__title">Education and Care Resources</h3>
      <p class="txds-benefit__text">Access up-to-date guidance on care, learning opportunities, and support programs.</p>
    </div>
  </div>
</div>

Horizontal Layout

Personal and Professional Support

Get guidance and resources for personal development, educational planning, life skills, and preparing for career opportunities.

View HTML

<div class="txds-benefits">
  <div class="txds-benefit txds-benefit--horizontal">
    <div class="txds-benefit__icon">
      <i class="bi bi-layers" aria-hidden="true"></i>
    </div>
    <div class="txds-benefit__content">
      <h3 class="txds-benefit__title">Personal and Professional Support</h3>
      <p class="txds-benefit__text">Get guidance and resources for personal development, educational planning, life skills, and preparing for career opportunities.</p>
    </div>
  </div>
</div>

Section With Heading

What we do

Personal and Professional Support

Get guidance and resources for personal development, educational planning, life skills, and preparing for career opportunities.

Education and Care Resources

Access up-to-date guidance on care, learning opportunities, and support programs.

View HTML

<div class="txds-benefits__section" style="max-width:400px;">
  <h2 class="txds-benefits__heading">What we do</h2>
  <div class="txds-benefit">
    <div class="txds-benefit__icon">
      <i class="bi bi-layers" aria-hidden="true"></i>
    </div>
    <h3 class="txds-benefit__title">Personal and Professional Support</h3>
    <p class="txds-benefit__text">Get guidance and resources for personal development, educational planning, life skills, and preparing for career opportunities.</p>
  </div>
  <div class="txds-benefit">
    <div class="txds-benefit__icon">
      <i class="bi bi-journal-bookmark" aria-hidden="true"></i>
    </div>
    <h3 class="txds-benefit__title">Education and Care Resources</h3>
    <p class="txds-benefit__text">Access up-to-date guidance on care, learning opportunities, and support programs.</p>
  </div>
</div>

CSS Classes

Class	Description
`txds-benefit`	Single benefit item (vertical by default).
`txds-benefit--horizontal`	Horizontal layout with icon to the left of content.
`txds-benefit__icon`	40px icon container.
`txds-benefit__title`	H4 title (28px bold).
`txds-benefit__text`	Body text (18px).
`txds-benefits__grid`	Auto-fill grid for multiple benefit items.
`txds-benefits__section`	Section wrapper with right border.
`txds-benefits__heading`	Section heading with left blue border accent.