Skip to main content
Texas Design System

← Back to Design Tokens

Link Patterns

Descriptive links improve your site's usability and provide search engines context between link text and link destinations, which is good for search engine optimization (SEO).

Recommended character limit: 75 characters max.

Content guidance:

  • Sentence case
  • No punctuation
  • Ensure link can stand on its own
  • Fit the link within the surrounding writing of the paragraph (for example, "Obtain a birth certificate through Vital Records.")
  • Describe and/or include the name of the page the link points to
  • Use unique text for each link within a document to help users of speech recognition software easily interpret the link's destination

Things to avoid:

  • Link text like "click here," "more," and "read more" — these links can be confusing when a screen reader reads them out of context

Examples of well-written link text:

  • Download the syllabus
  • Watch our video to learn more about our program
  • Explore program options

Small (16px)

Explore program options
View HTML 
<a href="#" class="txds-link">Explore program options</a>

Large (18px)

Download the syllabus
View HTML 
<a href="#" class="txds-link txds-link--lg">Download the syllabus</a>

X-Large (24px)

Watch our video to learn more about our program
View HTML 
<a href="#" class="txds-link txds-link--xl">Watch our video to learn more about our program</a>

All Sizes Side by Side

View HTML 
<div style="display: flex; flex-direction: row; gap: 32px; flex-wrap: wrap; align-items: baseline;">
  <div><a href="#" class="txds-link">Small — Explore program options</a></div>
  <div><a href="#" class="txds-link txds-link--lg">Large — Download the syllabus</a></div>
  <div><a href="#" class="txds-link txds-link--xl">X-Large — Watch our video to learn more</a></div>
</div>

States (Default / Hover / Visited)

View HTML 
<div style="display: flex; gap: 24px; flex-wrap: wrap; align-items: baseline;">
  <a href="#" class="txds-link txds-link--lg">Default</a>
  <a href="#" class="txds-link txds-link--lg" style="color: var(--txds-color-primary-60);">Hover</a>
  <a href="#" class="txds-link txds-link--lg" style="color: var(--txds-color-purple-60);">Visited</a>
</div>

Document Link

Used for downloadable files or named documents.

View HTML 
<div style="display: flex; flex-direction: column; gap: 12px;">
  <a href="#" class="txds-link-doc">
    <span class="txds-link-doc__icon">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM6 20V4h5v7h7v9H6z"/></svg>
    </span>
    Legislative Appropriations Request FY 2024–25
  </a>
  <a href="#" class="txds-link-doc">
    <span class="txds-link-doc__icon">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM6 20V4h5v7h7v9H6z"/></svg>
    </span>
    Legislative Appropriations Request FY 2026–27
  </a>
</div>