USWDS Components

Supported Components

The following USWDS components are supported by this theme.

Alert

Component Definition Alert

Alerts are supported by the usa-alert shortcode.

Layout Grid

Component Definition Grid

This theme uses Grid layouts as part of the default page templates.

The following Hugo shortcodes can be used to customize the grid layout used on a given page.

usa-grid-container: Can be used to center the content on the screen, with a maximum width of desktop (1024px).
usa-grid-row: Used with the usa-grid-column shortcode to support more fine-grained layouts.
usa-grid-column: Used to layout the spacing of individual columns with a usa-grid-row shortcode.

Component Definition Header

The USWDS Basic and Extended headers are provided in this theme. The “mega menu” variants are not currently supported.

Basic Header

Component Definition Basic Header

The Basic Header uses primary navigation menus defined in the site-wide and page-specific configurations.

The Basic Header is used in the List and Page templates to provide top-level navigation for all pages of the site, other than the homepage.

Extended Header

Component Definition Extended Header

The Extended Header uses primary and secondary navigation menus defined in the site-wide and page-specific configurations.

The Extended Header is used in the homepage template to provide top-level navigation for the site’s main homepage.

Icons

Component Definition Icons

A subset of Font Awesome icons are included in USWDS and can be accessed as static images using /img/{icon-filename}. If you need additional icons, use Font Awesome in your project.

Search

Component Definition Search

The search component is supported in the Basic and Extended Headers provided by the default templates. The default search used by these headers is provided by the layouts/partials/header-search.html template. This template can by overriden to provide a custom search.

Component Definition Side Navigation

The generation of side navigation can be customized using site and page parameters.

The list and page templates support auto generation of side navigation.

A few enhancements have also been made over the side navigation provided by USWDS. This theme uses Tocbot to automatically generate a table of contents for each page in the side navigation. The entries in the table of contents are based on the headings within the page. The behavior of the table of contents can be customized by the page parameters: sidenav.toc.enabled, sidenav.toc.headingselectors, sidenav.toc.includeHtml, and sidenav.toc.collapseDepth.

Table

Component Definition Table

A partial implementation of the USWDS Bordered Table component is provided when using tables in Markdown.

Borderless Tables are not currently supported.

Tag

Component Definition Tag

The USWDS Tag component is supported by the usa-tag shortcode.

Typography

Component Definition Typography

Some aspects of the USWDS Typography are currently supported, as follows.

Prose Formatting

Some features of USWDS prose is supported by this theme.

The usa-intro shortcode can be used for intro text.

Inline HTML can be included in markdown to make use of p and span tags with typography classes.

USWDS Theme Settings

This theme uses the following USWDS theme settings to provide default styles for Markdown text.

$theme-global-paragraph-styles: true;
$theme-global-link-styles:      true;
$theme-global-content-styles:   true;

The setting $theme-global-paragraph-styles provides default styling for Markdown paragraphs.

The setting $theme-global-link-styles provides default styling for Markdown links.

The setting $theme-global-content-styles provides default styling for paragraph text, links, headings, lists, and tables.

Unsupported Components

The following USWDS components are not currently supported by this theme:

It is possible to use these USWDS components as inline HTML inside Markdown pages.