Components
Browse all available components below. Each component page includes live rendered previews, copy-ready HTML, usage guidance, and a complete CSS class reference.
Accordion
Expandable sections that show or hide content on click.
Alert Banner
Displays high-priority announcements and emergency messages. Dismissable. 200 character max.
Branding
Agency logo placeholder for the Header and Footer. Full Color and One Color Blue variants available.
Breadcrumb
Secondary navigation showing the current page's location within the site.
Button
Primary and secondary button variants. Sentence case, verb-first labels, 30 character max.
Chip
Wayfinding labels on pages. No punctuation. Max 2-3 words.
Desktop Navigation
Desktop navigation bar. Menu-only and Combined variants.
Featured Banner
A full-width promotional strip used to highlight a featured service or program with a title, optional description, and call-to-action button.
Featured Cards
Cards that display a photo, linked title, short description, and an optional content tag. Hover adds a primary-50 border and card shadow.
Footer
Two-section footer with agency links, required state links, and legal information.
Form Inputs & Filters
Form inputs, selection controls, and filter patterns for collecting and refining user data.
Get in Touch
Contact form for constituents to reach agencies directly.
Header Bar
Site header with agency branding, language selector, and search. Collapses to a hamburger menu on mobile.
Hero Banner
A split-layout hero banner with heading, body text, CTA button, and a large photo. Supports Filled (dark) and No Fill (light) variants for desktop and mobile.
Language Selector
Language switching dropdown. Three variants: Outline, Filled, and Button with globe icon.
Location Search
Search by county to find nearby Texas office locations. Horizontal and vertical layouts.
Mega Menu
Full-width dropdown navigation menu. Supports 2-, 3-, and 4-column layouts.
Mobile Menu
Full-height mobile navigation panel with search, language selector, and expandable menu sections.
News & Events
Cards for displaying news releases and events with a colored top bar, taxonomy tag, date, linked title, and body text.
Page Header
Full-width banner with clamped content that shows Breadcrumbs, H1 Title, and optional description. Used at the top of interior landing pages.
Pagination
Limits content to pages of results. Default 10 items per page.
Photo Quote
Visual treatment of a quote or short statement with a large background photo. Supports Bottom, Right, and Left positions.
Popular Services
Display that features services with a title, description, and arrow link. Includes a section wrapper with optional pagination controls.
Program Contact Card
Contact card for program detail pages with email, phone, and mailing address.
Program Header
Full-width hero banner for program pages. Green, White, and Wide variants.
Search
Search banner with heading and search input. Dark and light themes.
Search Results and Directory Listings
Search result items with title, description, and date. Large, Small, and Directory variants.
Texas Website Banner
A banner identifying the site as an official Texas state government website. Recommended at the very top of every page, above the header.
Video Player
Embedded video player for YouTube and hosted content.
What We Do
Icon, title, and description blocks used to highlight key programs and services. Supports vertical and horizontal layouts.