Components form the basic building blocks of the PDS. We’ve identified and created the most commonly used components that are utilized in websites. Each of the components includes the work component, a code snippet detailing its construction, usage considerations detailing when and when not to use an item, general usability considerations, and accessibility requirements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id auctor dui. Aenean posuere ante fermentum massa consequat iaculis. Praesent eget elit sit amet nibh interdum faucibus et vitae tellus. Nunc fermentum consequat diam. Quisque pellentesque leo risus, non rhoncus augue mattis vel. Sed placerat faucibus ipsum a molestie. Morbi et magna rutrum, pharetra augue a, maximus arcu. Vivamus mollis accumsan purus sed commodo. Aenean fringilla urna at enim tincidunt, vitae molestie velit euismod.
Example Link<ul class="accordion" data-accordion="container" data-allow-all-closed="true" role="tablist">
<li class="accordion-item is-active" data-accordion-item="" role="presentation">
<a aria-controls="accordion1ID" aria-expanded="true" aria-selected="true" class="accordion-title" href="#!" id="accordionFaqItem1Label" role="tab">Accordion 1</a>
<div tabindex="0" aria-hidden="false" aria-labelledby="accordion1Label" class="accordion-content" data-tab-content id="accordion1ID" role="tabpanel" style="display:block;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id auctor dui. Aenean posuere ante fermentum massa consequat iaculis. Praesent eget elit sit amet nibh interdum faucibus et vitae tellus. Nunc fermentum consequat diam. Quisque pellentesque leo risus, non rhoncus augue mattis vel. Sed placerat faucibus ipsum a molestie. Morbi et magna rutrum, pharetra augue a, maximus arcu. Vivamus mollis accumsan purus sed commodo. Aenean fringilla urna at enim tincidunt, vitae molestie velit euismod.</p> <a href='#!'>Example Link</a>
</div>
</li>
<li class="accordion-item " data-accordion-item="" role="presentation">
<a aria-controls="accordion2ID" aria-expanded="false" aria-selected="false" class="accordion-title" href="#!" id="accordionFaqItem1Label" role="tab">Accordion 2</a>
<div tabindex="0" aria-hidden="true" aria-labelledby="accordion2Label" class="accordion-content" data-tab-content id="accordion2ID" role="tabpanel" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id auctor dui. Aenean posuere ante fermentum massa consequat iaculis. Praesent eget elit sit amet nibh interdum faucibus et vitae tellus. Nunc fermentum consequat diam. Quisque pellentesque leo risus, non rhoncus augue mattis vel. Sed placerat faucibus ipsum a molestie. Morbi et magna rutrum, pharetra augue a, maximus arcu. Vivamus mollis accumsan purus sed commodo. Aenean fringilla urna at enim tincidunt, vitae molestie velit euismod.</p> <a href='#!'>Example Link</a>
</div>
</li>
<li class="accordion-item " data-accordion-item="" role="presentation">
<a aria-controls="accordion3ID" aria-expanded="false" aria-selected="false" class="accordion-title" href="#!" id="accordionFaqItem1Label" role="tab">Accordion 3</a>
<div tabindex="0" aria-hidden="true" aria-labelledby="accordion3Label" class="accordion-content" data-tab-content id="accordion3ID" role="tabpanel" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id auctor dui. Aenean posuere ante fermentum massa consequat iaculis. Praesent eget elit sit amet nibh interdum faucibus et vitae tellus. Nunc fermentum consequat diam. Quisque pellentesque leo risus, non rhoncus augue mattis vel. Sed placerat faucibus ipsum a molestie. Morbi et magna rutrum, pharetra augue a, maximus arcu. Vivamus mollis accumsan purus sed commodo. Aenean fringilla urna at enim tincidunt, vitae molestie velit euismod.</p> <a href='#!'>Example Link</a>
</div>
</li>
</ul>
An accordion is a list of headers that hide or reveal additional content when selected.
When to Use
When Not to Use
Usability
title="Expand All Accordion Sections"
after the accordion appears on the page.Accessibility
<button>
ensures that accordions are usable with both screen readers and the keyboard.aria-expanded="true"
. The aria-expanded="false"
attributes will be added to other buttons when the accordion is initialized by the JavaScript.aria-controls="id"
that associates the control to the appropriate region by referencing the controlled element’s id.aria-hidden="true"
on any of your content areas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id auctor dui. Aenean posuere ante fermentum massa consequat iaculis. Praesent eget elit sit amet nibh interdum faucibus et vitae tellus. Nunc fermentum consequat diam. Quisque pellentesque leo risus, non rhoncus augue mattis vel. Sed placerat faucibus ipsum a molestie. Morbi et magna rutrum, pharetra augue a, maximus arcu. Vivamus mollis accumsan purus sed commodo. Aenean fringilla urna at enim tincidunt, vitae molestie velit euismod.
Example Link<ul class="accordion -unstriped" data-accordion="faq" data-allow-all-closed="true" role="tablist">
<li class="accordion-item is-active" data-accordion-item="" role="presentation">
<a aria-controls="accordion1ID" aria-expanded="true" aria-selected="true" class="accordion-title" href="#!" id="accordionFaqItem1Label" role="tab">Accordion 1</a>
<div tabindex="0" aria-hidden="false" aria-labelledby="accordion1Label" class="accordion-content" data-tab-content id="accordion1ID" role="tabpanel" style="display:block;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id auctor dui. Aenean posuere ante fermentum massa consequat iaculis. Praesent eget elit sit amet nibh interdum faucibus et vitae tellus. Nunc fermentum consequat diam. Quisque pellentesque leo risus, non rhoncus augue mattis vel. Sed placerat faucibus ipsum a molestie. Morbi et magna rutrum, pharetra augue a, maximus arcu. Vivamus mollis accumsan purus sed commodo. Aenean fringilla urna at enim tincidunt, vitae molestie velit euismod.</p> <a href='#!'>Example Link</a>
</div>
</li>
<li class="accordion-item " data-accordion-item="" role="presentation">
<a aria-controls="accordion2ID" aria-expanded="false" aria-selected="false" class="accordion-title" href="#!" id="accordionFaqItem1Label" role="tab">Accordion 2</a>
<div tabindex="0" aria-hidden="true" aria-labelledby="accordion2Label" class="accordion-content" data-tab-content id="accordion2ID" role="tabpanel" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id auctor dui. Aenean posuere ante fermentum massa consequat iaculis. Praesent eget elit sit amet nibh interdum faucibus et vitae tellus. Nunc fermentum consequat diam. Quisque pellentesque leo risus, non rhoncus augue mattis vel. Sed placerat faucibus ipsum a molestie. Morbi et magna rutrum, pharetra augue a, maximus arcu. Vivamus mollis accumsan purus sed commodo. Aenean fringilla urna at enim tincidunt, vitae molestie velit euismod.</p> <a href='#!'>Example Link</a>
</div>
</li>
<li class="accordion-item " data-accordion-item="" role="presentation">
<a aria-controls="accordion3ID" aria-expanded="false" aria-selected="false" class="accordion-title" href="#!" id="accordionFaqItem1Label" role="tab">Accordion 3</a>
<div tabindex="0" aria-hidden="true" aria-labelledby="accordion3Label" class="accordion-content" data-tab-content id="accordion3ID" role="tabpanel" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id auctor dui. Aenean posuere ante fermentum massa consequat iaculis. Praesent eget elit sit amet nibh interdum faucibus et vitae tellus. Nunc fermentum consequat diam. Quisque pellentesque leo risus, non rhoncus augue mattis vel. Sed placerat faucibus ipsum a molestie. Morbi et magna rutrum, pharetra augue a, maximus arcu. Vivamus mollis accumsan purus sed commodo. Aenean fringilla urna at enim tincidunt, vitae molestie velit euismod.</p> <a href='#!'>Example Link</a>
</div>
</li>
</ul>
WARNING!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut posuere ante. Donec non suscipit eros, a blandit lorem. Proin porta sapien pretium velit volutpat volutpat. Proin sit.
<div data-alert data-closable tabindex="0" role="alertdialog" class="callout alert">
<p class="h3"><strong>WARNING!</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut posuere ante. Donec non suscipit eros, a blandit lorem. Proin porta sapien pretium velit volutpat volutpat. Proin sit.</p>
<button class="close-button" aria-label="Dismiss alert" data-close>
<span aria-hidden="true" aria-label="close" role="button">×</span><br>
<span aria-hidden="true" aria-label="close" role="label">close</span>
</button>
</div>
An alert keeps citizens informed of important and sometimes time-sensitive changes.
When to Use
When Not to Use
Usability
Accessibility
role="alert"
to inform Assistive Technologies of a time-sensitive and important message. If the message is interactive, use the ARIA role="alertdialog"
.SUCCESS!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut posuere ante. Donec non suscipit eros, a blandit lorem. Proin porta sapien pretium velit volutpat volutpat. Proin sit.
<div data-alert data-closable tabindex="0" role="alertdialog" class="callout success">
<p class="h3"><strong>SUCCESS!</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut posuere ante. Donec non suscipit eros, a blandit lorem. Proin porta sapien pretium velit volutpat volutpat. Proin sit.</p>
<button class="close-button" aria-label="Dismiss alert" data-close>
<span aria-hidden="true" aria-label="close" role="button">×</span><br>
<span aria-hidden="true" aria-label="close" role="label">close</span>
</button>
</div>
NOTICE!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut posuere ante. Donec non suscipit eros, a blandit lorem. Proin porta sapien pretium velit volutpat volutpat. Proin sit.
<div data-alert data-closable tabindex="0" role="alertdialog" class="callout warning">
<p class="h3"><strong>NOTICE!</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut posuere ante. Donec non suscipit eros, a blandit lorem. Proin porta sapien pretium velit volutpat volutpat. Proin sit.</p>
<button class="close-button" aria-label="Dismiss alert" data-close>
<span aria-hidden="true" aria-label="close" role="button">×</span><br>
<span aria-hidden="true" aria-label="close" role="label">close</span>
</button>
</div>
<nav aria-label="Breadcrumb" role="navigation">
<ul class="breadcrumbs">
<li><a href="#!" class="">Parent Page</a></li>
<li><a href="#!" class="">Landing Page</a></li>
<li><a href="#!" class="">Subpage</a></li>
<li><a href="#!" class="" aria-current="page">Current Location</a></li>
</ul>
</nav>
Breadcrumbs indicate the current page’s location within a navigational hierarchy.
When to Use
When Not to Use
Usability
Accessibility
aria-label="breadcrumb"
to the <nav>
element.aria-current=""
element added to indicate where the user is located in the navigation when using assistive technology.<nav aria-label="Breadcrumb" role="navigation">
<ul class="breadcrumbs">
<li><a href="#!" class="-focus">Parent Page</a></li>
<li><a href="#!" class="">Landing Page</a></li>
<li><a href="#!" class="">Subpage</a></li>
<li><a href="#!" class="" aria-current="page">Current Location</a></li>
</ul>
</nav>
<nav aria-label="Breadcrumb" role="navigation">
<ul class="breadcrumbs">
<li><a href="#!" class="-hover">Parent Page</a></li>
<li><a href="#!" class="">Landing Page</a></li>
<li><a href="#!" class="">Subpage</a></li>
<li><a href="#!" class="" aria-current="page">Current Location</a></li>
</ul>
</nav>
<button class="button -primary">
Submit
</button>
Buttons are visually prominent calls to action.
When to Use
When Not to Use
Usability
How to Use
Primary Button
Secondary Button
Accessibility
<div>
or <img>
tags to create buttons. Screen readers don’t automatically know either is a usable button.<button class="button -back-to-top">
<i>
<span class="show-for-sr">Triangle Icon</span>
</i>
Submit
</button>
<button class="button -back-to-top -focus">
<i>
<span class="show-for-sr">Triangle Icon</span>
</i>
Submit
</button>
<button class="button -back-to-top -hover">
<i>
<span class="show-for-sr">Triangle Icon</span>
</i>
Submit
</button>
This is a sub heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ornare nulla accumsan ut cras magna enim massa ornare at.
This is a link<div class="card">
<img src="assets/toolkit/images/bg/hero-bg-small.jpg" alt="Add Alt Text">
<div class="card-section">
<h2 class="card-title">This is a title</h2>
<p class="card-subtitle">This is a sub heading</p>
<div class="card-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ornare nulla accumsan ut cras magna enim massa ornare at.</p>
<a href=#! class="button -primary">
This is a link
</a>
</div>
</div>
</div>
When to Use
When Not to Use
<nav>
elements within the card.Usability
Accessibility
<fieldset class="form-group">
<legend>Historical Figures</legend>
<label class="check-group" for="checkbox1">
<input type="checkbox" checked="checked" id="checkbox1">One
<span class="checkmark"></span>
</label>
<label class="check-group" for="checkbox2">
<input type="checkbox" id="checkbox2">Two
<span class="checkmark"></span>
</label>
<label class="check-group" for="checkbox3">
<input type="checkbox" id="checkbox3">Three
<span class="checkmark"></span>
</label>
<label class="check-group" for="checkbox4">
<input type="checkbox" id="checkbox4" disabled>Four
<span class="checkmark"></span>
</label>
</fieldset>
Checkboxes allow citizens to select one or more options from a visible list.
When to Use
When Not to Use
Usability
Accessibility
<fieldset class="form-group">
. The <legend>
provides context for the grouping. Do not use fieldset and legend for a single check.for=""
attribute.<label>
.<fieldset class="form-group ">
<label for="date-picker-1">Date input (MM/DD/YYYY)</label>
<input type="text" id="date-picker-1" maxlength="10" />
</fieldset>
Single date input appropriate for most dates.
When to Use
When Not to Use
Usability
Accessibility
<fieldset class="form-group">
<legend>Upload File Single</legend>
<label class="button -secondary" for="fileUpload1">Upload File</label>
<input type="file" id="fileUpload1" />
</fieldset>
<fieldset class="form-group">
<legend>Upload File Multiple</legend>
<label class="button -secondary" for="fileUpload2">Upload File</label>
<input type="file" id="fileUpload2" />
</fieldset>
A specialized button for attaching files.
When to Use
When Not to Use
Usability
Accessibility
for=""
attribute to denote what the label is used for, such as for=”custom_file”
.<fieldset class="form-group">
<legend>Historical Figures</legend>
<label class="check-group" for="radio1">One
<input type="radio" checked="checked" name="radio" id="radio1">
<span class="radiobtn"></span>
</label>
<label class="check-group" for="radio2">Two
<input type="radio" name="radio" id="radio2">
<span class="radiobtn"></span>
</label>
<label class="check-group" for="radio3">Three
<input type="radio" name="radio" id="radio3">
<span class="radiobtn"></span>
</label>
<label class="check-group" for="radio4">Four
<input type="radio" name="radio" id="radio4" disabled>
<span class="radiobtn"></span>
</label>
</fieldset>
Radio buttons allow citizens to see all available choices and select exactly one.
When to Use
When Not to Use
Usability
Accessibility
<fieldset class="form-group">
and describe the group with <legend>
.<label>
. Associate the two by matching the <label>
’s for attribute to the <input>
’s id attribute.<label>
.<fieldset class="form-group">
<label for="options">Dropdown Label</label>
<select name="options" id="options">
<option value="">Default</option>
<option value="value1">Option A</option>
<option value="value2">Option B</option>
<option value="value3">Option C</option>
</select>
</fieldset>
Dropdowns allow citizens to select one option from a temporary modal menu.
When to Use
When Not to Use
Usability
<option value>Default</option>
.Accessibility
<fieldset class="form-group">
<label for="text-area">Text area label</label>
<textarea id="text-area" name="text-area"></textarea>
</fieldset>
A large input meant for capturing qualitative information.
When to Use
When Not to Use
Usability
Accessibility
<fieldset class="form-group ">
<label for="input-type-text">Text Input label</label>
<input type="text" id="input-type-text" />
</fieldset>
<fieldset class="form-group ">
<label for="input-active">Text Input Active</label>
<input type="text" id="input-active" class="-active" value="Value" />
</fieldset>
<fieldset class="form-group ">
<label for="input-focus">Text Input Focused</label>
<input type="text" id="input-focus" class="-focus" />
</fieldset>
<fieldset class="form-group -error">
<label for="input-error">Text Input Error</label>
<span class="form-message" role="alert" id="input-error-message">Helpful error message</span>
<input type="text" id="input-error" />
</fieldset>
<fieldset class="form-group -success">
<label for="input-success">Text Input Success</label>
<span class="form-message" role="alert" id="input-success-message">Helpful success message</span>
<input type="text" id="input-success" />
</fieldset>
Text inputs allow citizens to enter any combination of letters, numbers, or symbols. Text input boxes can span single or multiple lines.
When to Use
When Not to Use
Usability
field-group
(in this case, the <fieldset>
element is used). When a specific error or success is needed to be displayed related to that form element, include a <span class="form-message">
inside the parent class field-group
, and extend this parent with a class of -error
or -success
for their respective visuals.Accessibility
<fieldset class="form-group ">
<label for="time">Time Input (hh:mm)</label>
<input type="text" id="time" maxlength="5" />
</fieldset>
Single time input is appropriate for most times.
When to Use
When Not to Use
Usability
Accessibility
Alert Title
Alert Title Closeable
<div class="callout -small alert" role="alert">
<p class="callout-title"><strong>Alert Title</strong></p>
<ul>
<li><i class="icon-check"></i>Use at least one uppercase character</li>
<li>Use at least one numeric value</li>
</ul>
</div>
<div class="callout -small alert" data-closable role="alert">
<p class="callout-title"><strong>Alert Title Closeable</strong></p>
<ul>
<li><i class="icon-check"></i>Use at least one uppercase character</li>
<li>Use at least one numeric value</li>
</ul>
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true" aria-label="close" role="button">×</span><br>
<span aria-hidden="true" aria-label="close" role="label">close</span>
</button>
</div>
Stating validation requirements upfront, with live feedback, means citizens won’t be left guessing.
When to Use
When Not to Use
Usability
Accessibility
<div class="row">
<div class="columns small-6">6 columns</div>
<div class="columns small-6">6 columns</div>
</div>
<div class="row">
<div class="columns medium-6 large-4">12/6/4 columns</div>
<div class="columns medium-6 large-8">12/6/8 columns</div>
</div>
Our grid system is based on Foundation’s Flex Grid.
The Foundation 6 Flex Grid works very similarly to its standard float grid but includes a number of useful features only possible with flexbox, like horizontal and vertical alignment, automatic sizing, and easier source ordering. The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid.
When to Use
When Not to Use
Usability
Accessibility
This is a subheadline
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et placeat quo fugit quas, fuga modi culpa omnis dolores illo autem reiciendis atque minima distinctio earum, veniam dicta voluptatibus. Quasi, sit?
<div class="reveal" id="exampleModal1" data-reveal aria-labelledby="modal1_label" aria-modal="true" role="dialog">
<h2 id="modal1_label">This is a headline</h2>
<p class="lead">This is a subheadline</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et placeat quo fugit quas, fuga modi culpa omnis dolores illo autem reiciendis atque minima distinctio earum, veniam dicta voluptatibus. Quasi, sit?</p>
<button class="close-button" data-close aria-label="Close modal">
<span aria-hidden="true" aria-label="close" role="button">×</span><br>
<span aria-hidden="true" aria-label="close" role="label">close</span>
</button>
</div>
<p><button class="button -secondary" data-open="exampleModal1">Click me for a modal</button></p>
Modals are used to display content in a layer above the app/website.
When to Use
When Not to Use
Usability
Accessibility
role="dialog"
.aria-hidden="true"
, so assistive technology won’t read out the underlying page. The best way to do this is to give the modal and the page separate wrapper elements and toggle aria-hidden="true"
/aria-hidden="false"
on the main page’s wrapper depending on whether or not the modal is open.aria-labelledby
attribute whose value is the id of the modal’s heading.<nav aria-label="Pagination">
<ul class="pagination text-center">
<li class="pagination-previous"><a class="button -pagination" href="#!"><i class="fas fa-caret-left hide-for-medium"></i><span class="show-for-medium">Previous</span></a></li>
<li><a href="#!" aria-label="Page 1">1</a></li>
<li class="current"><span class="show-for-sr" role="note">You're on page</span><a href="#!" aria-label="Page 2" aria-current="page">2</a></li>
<li><a href="#!" aria-label="Page 3">3</a></li>
<li><a href="#!" aria-label="Page 4">4</a></li>
<li><a href="#!" aria-label="Page 5">5</a></li>
<li class="ellipsis"></li>
<li><a href="#!" aria-label="Page 20">20</a></li>
<li class="pagination-next"><a class="button -pagination" href="#!"><i class="fas fa-caret-right hide-for-medium"></i><span class="show-for-medium">Next</span></a></li>
</ul>
</nav>
When to Use
When Not to Use
Usability
Accessibility
<nav>
element when you can.<nav>
element, add role="navigation"
to the markup.
<nav>
element, making it redundant to use both at the same time.aria-label="pagination"
to describe the type of navigation.aria-current="page"
to the link that points to the current page. This will tell Assistive Technology that the focused link is pointing to the current page.aria-disabled="true"
to the link when the link is disabled.<nav aria-label="Pagination">
<ul class="pagination text-center">
<li class="pagination-previous"><a class="button -pagination -disabled" href="#!"><i class="fas fa-caret-left hide-for-medium"></i><span class="show-for-medium">Previous</span></a></li>
<li class="current"><span class="show-for-sr" role="note">You're on page</span><a href="#!" aria-label="Page 1" aria-current="page">1</a></li>
<li><a href="#!" aria-label="Page 2">2</a></li>
<li><a href="#!" aria-label="Page 3">3</a></li>
<li><a href="#!" aria-label="Page 4">4</a></li>
<li><a href="#!" aria-label="Page 5">5</a></li>
<li class="ellipsis"></li>
<li><a href="#!" aria-label="Page 20">20</a></li>
<li class="pagination-next"><a class="button -pagination" href="#!"><i class="fas fa-caret-right hide-for-medium"></i><span class="show-for-medium">Next</span></a></li>
</ul>
</nav>
<nav aria-label="Pagination">
<ul class="pagination text-center">
<li class="pagination-previous"><a class="button -pagination" href="#!"><i class="fas fa-caret-left hide-for-medium"></i><span class="show-for-medium">Previous</span></a></li>
<li><a href="#!" aria-label="Page 1">1</a></li>
<li class="current"><span class="show-for-sr" role="note">You're on page</span><a href="#!" aria-label="Page 2" aria-current="page">2</a></li>
<li><a href="#!" aria-label="Page 3">3</a></li>
<li><a href="#!" aria-label="Page 4">4</a></li>
<li><a href="#!" aria-label="Page 5">5</a></li>
<li class="pagination-next"><a class="button -pagination -disabled" href="#!"><i class="fas fa-caret-right hide-for-medium"></i><span class="show-for-medium">Next</span></a></li>
</ul>
</nav>
Table Heading 1 | Table Heading 2 | Table Heading 3 |
---|---|---|
Table Cell 1 | Table Cell 2 | Table Cell 3 |
Table Cell 1 | Table Cell 2 | Table Cell 3 |
Table Cell 1 | Table Cell 2 | Table Cell 3 |
<table class="hover">
<caption class="sr-only">Table Title</caption>
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
</tbody>
</table>
A table shows tabular data in columns and rows.
When to Use
When Not to Use
Usability
Accessibility
scope="col"
or scope="row"
.<caption>
tag inside of the <table>
element.Table Heading 1 | Table Heading 2 | Table Heading 3 |
---|---|---|
Link 1 | Link 2 | Link 3 |
Table Cell 1 | Link 2 | Link 3 |
Link 1 | Link 2 | Link 3 |
<table class="hover">
<caption class="sr-only">Table Title</caption>
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#!" target="_blank">Link 1</a>
</td>
<td>
<a href="#!">Link 2</a>
</td>
<td>
<a href="#!">Link 3</a>
</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>
<a href="#!">Link 2</a>
</td>
<td>
<a href="#!">Link 3</a>
</td>
</tr>
<tr>
<td>
<a href="#!">Link 1</a>
</td>
<td>
<a href="#!">Link 2</a>
</td>
<td>
<a href="#!">Link 3</a>
</td>
</tr>
</tbody>
</table>
<span class="label">Static Content</span>
<span class="label" data-closable>
Static Content Closable
<button class="close-button" aria-label="Close / Delete" data-close>
<span aria-hidden="true" aria-label="close">×</span>
</button>
</span>
<a href="#!" class="label">
Hyperlink
</a>
<a href="#!" class="label" data-closable>
Hyperlink Closable
<button class="close-button" aria-label="Close / Delete" data-close>
<span aria-hidden="true" aria-label="close">×</span>
</button>
</a>
Tags can focus attention on important content or content that might otherwise be missed.
When to Use
When Not to Use
Usability
Accessibility