Text
Skip to main content
Careers Contact us

Text

Component library

How to use this component

Select this component whenever you need to convey information, guide users, or communicate important details in text form.

The Text component allows users to input, format, and organize text content within a web page.

Text component

View video transcript for Text component.

Best practices

  • Keep formatting such as bold and italics to a minimum.
  • Align text to the left, avoid center and right-alignment.
  • Insert text as plain text from editors like Notepad, then format it within the Text component.
  • Copy clean URLs from web browsers for links instead of directly from emails.
  • Do not underline text, as it can be confused with links.
  • Avoid copying and pasting text directly from Word into the Text component.
  • Do not copy and paste links directly from email programs.
  • Do not paste bullets or numbered lists, instead use the "Lists" feature in the text editor.
  • Do not include images, icons, tables, or other elements within the text component.

Characteristics and options

  • Text component blocks can be placed almost anywhere on a page below the H1 Title.
  • Headings should be applied using the "Paragraph formats" tool to logically organize content and apply structure for readers.
  • Multiple Text components can be used on a page for easier future edits.
  • Ensure proper padding and spacing with other components to maintain readability.
    • Use the indent and outdent options to have subgroups under an ordered or numbered list.

Hyperlinking text content

  • Select your text, then click the "Hyperlink" button in the Text toolbar. 
  • Don't hyperlink full sentences, only a few words that accurately account for the new page.
  • Don't use "Click here" language for hyperlinks. Opt instead for "Visit TxDOT.gov" or "The Texas Department of Transportation" has an option to help customers.

For external links: 

  • Place the url in the path under the hyperlink option. 
  • Use the "New Tab" option.

For internal links on TxDOT.gov:

  • Use the "Open Selection Dialog" option, which looks like a checkbox, to the right of the path field.
  • Navigate the file tree to your page, click the folder next to your page, then click the "Select" button. 
  • Use the "Target" option. 

Accessibility guidelines

  • Ensure text content is accessible by following TxDOT writing guidelines.
  • Use semantic HTML elements for text components to enhance screen reader capability.
  • Use headings (H2-H6) correctly to create a logical and accessible structure.
  • Use meaningful text for links instead of generic phrases like "click here" or "read more."
  • Links should be easy to see and recognize by using both color and underline, not just color alone.

Web Coordinator Checklist

  1. Insert plain text: Copy text from editors like Notepad, not directly from Word or emails.
  2. Format text: Use minimal formatting (bold, italics) and align text to the left.
  3. Create links: Use meaningful text for links and the path picker tool for relative links; open external links in a new tab.
  4. Apply headings: Use the Paragraph tool to apply headings logically, starting with H2.
  5. Ensure proper placement: Place text blocks appropriately and use bottom margins consistently throughout the page.
  6. Review content: Double-check for clean URLs and proper link functionality.