AHRQ's UI Design Elements & Patterns

Patterns are a simple, reusable solution to a design problem.

Text Styling

This is bold and this is strong. This is italic and this is emphasized. This is superscript text and this is subscript text. This is underlined and this is code: for (;;) { ... }. Finally, this is a link.


Heading 4

Lorem ipsum subtitles galore.

Paragraphical element unc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

Heading 5

Lorem ipsum subtitles galore.

Paragraphical element unc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.


Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Blockquote
"If you want a [return] on our basic and clinical investments at NIH, you need AHRQ to improve care delivery so patients can benefit from the therapies that NIH discovered. AHRQ and only AHRQ is responsible for research on how to do it."

-Peter Pronovost, M.D., Ph.D.

Preformatted


i = 0;

while (!deck.isInOrder()) {
  print 'Iteration ' + i;
  deck.shuffle();
  i++;
}

print 'It took ' + i + ' iterations to sort the deck.';
	
								

List Types

Unordered Lists
  • Item 1
  • Item 2
  • Item 3
Alternate List
  • Thing 1
  • Thing 2
  • Thing 3
Ordered Lists
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
Icons We Use
Behaviors, Actions, & States

Tables AHRQ Uses

Example Without Borders
Tool Description Format
Item One AHRQ Research Studies Data Info Example. PDF[PDF file - 0.0 KB]
Item Two AHRQ Research Studies Data Info Example. PDF[PDF file - 0.0 KB]
Item Three AHRQ Research Studies Data Info Example. PDF[PDF file - 0.0 KB]
Item Four AHRQ Research Studies Data Info Example. PDF[PDF file - 0.0 KB]
Item Five AHRQ Research Studies Data Info Example. PDF[PDF file - 0.0 KB]
Alternate Example
Name Description File Size
Item One AHRQ Research Studies Data Info Example. PDF[PDF file - 0.0 KB]
Item Two AHRQ Research Studies Data Info Example. PDF[PDF file - 0.0 KB]
Item Three AHRQ Research Studies Data Info Example. PDF[PDF file - 0.0 KB]
Item Four AHRQ Research Studies Data Info Example. PDF[PDF file - 0.0 KB]
Item Five AHRQ Research Studies Data Info Example. PDF[PDF file - 0.0 KB]

Buttons

  • Disabled
  • Disabled

Form

User Interface Elements

Patterns seen across the site.
Example Wireframe
Yellow Brief
YouTube Video Frame
What's New Block
Global Navigation
Top Navigation
Twitter Feed
Footer
Social Media Block
Mega Menu
Slides
Featured Card
Pagination
Grey Brief
Citations Brief
HHS Footer
Global Search
Cards
Blue Bar

View Wireframes

Whether AHRQ.gov users are aware of it or not, we have become familiar with elements acting in a certain way. Choosing to adopt those elements when appropriate will help with task completion, efficiency, and satisfaction.