```
--------------------------------
### Font Mixin and Utility Class Examples
Source: https://github.com/uswds/uswds-site/blob/main/pages/design-tokens/overview.md
Demonstrates the usage of the `u-font` mixin and corresponding utility classes for applying font family and size. Use these to apply specific font styles.
```css
u-font('sans', '3xs')
```
```css
.font-sans-3xs
```
```css
u-font('ui', 'lg')
```
```css
.font-ui-lg
```
```css
u-font('body', '2xl')
```
```css
.font-body-2xl
```
--------------------------------
### Default Process List
Source: https://github.com/uswds/uswds-site/blob/main/_includes/code/components/process-list.html
Renders a standard process list with default styling and text labels.
```html
{% capture process-list %} {% library_component usa-process-list %} {% endcapture %}{{ process-list | strip }}
```
--------------------------------
### Measure Utility Example
Source: https://github.com/uswds/uswds-site/blob/main/_utilities/paragraph-styles.md
Sets the maximum width of an element, often used to constrain text lines for better readability. This example demonstrates applying a 'measure' class to a paragraph.
```html
In compliance with the request of a friend of mine, who wrote me from the East, I called on good-natured, garrulous old Simon Wheeler, and inquired after my friend’s friend, Leonidas W. Smiley, as requested to do, and I hereunto append the result.
```
--------------------------------
### Margin Utility Mixin Example
Source: https://github.com/uswds/uswds-site/blob/main/_utilities/margin-and-padding.md
Demonstrates the SCSS mixin for applying margin utilities. This allows for programmatic control over margin values using design tokens.
```scss
u-margin-modifier(units)
```
--------------------------------
### Sass Utility Examples
Source: https://github.com/uswds/uswds-site/blob/main/_utilities/overview.md
The Sass code that generates the USWDS utility classes. These examples show how specific CSS properties are assigned values from theme settings or common units.
```sass
background-color: color('primary-darker')
```
```sass
background-color: color('red-50v')
```
```sass
text-decoration: underline
```
```sass
margin-left: auto;
margin-right: auto;
```
```sass
padding-bottom: units(1)
```
--------------------------------
### Auto Layout Columns Example
Source: https://github.com/uswds/uswds-site/blob/main/_utilities/layout-grid.md
Use `.grid-col-auto` for columns that fit the natural width of their content. `.grid-col` and `.grid-col-fill` flex to fill available space.
```html
.grid-col-auto
.grid-col
.grid-col-fill
.grid-col-auto
```
--------------------------------
### Outline Utility Examples
Source: https://github.com/uswds/uswds-site/blob/main/_utilities/outline.md
Apply solid outlines of specified widths using the `.outline-{width}` classes. These utilities are applied to elements to create visual borders.
```html
```
--------------------------------
### Utility CSS Examples
Source: https://github.com/uswds/uswds-site/blob/main/_utilities/overview.md
Examples of USWDS utility classes and their corresponding Sass output. These utilities target various CSS properties like background color, text decoration, and margins.
```html
.bg-primary-darker
```
```html
.bg-red-50v
```
```html
.text-underline
```
```html
.margin-x-auto
```
```html
.padding-bottom-1
```
--------------------------------
### Outline Color Utility Examples
Source: https://github.com/uswds/uswds-site/blob/main/_utilities/outline.md
Set the color of an outline using the `.outline-{color}` classes in conjunction with a base outline width. Examples show the outline applied to both light and dark backgrounds.
```html
```
--------------------------------
### Point Sass entry point to package source
Source: https://github.com/uswds/uswds-site/blob/main/pages/documentation/migration-V3.md
Further optimize by pointing your Sass entry point directly at each component package's source styles directory (`/src/styles`). This avoids importing dependencies multiple times.
```scss
@forward "usa-banner/src/styles";
@forward "usa-layout-grid/src/styles";
@forward "usa-media-block/src/styles";
@forward "uswds-fonts";
```
--------------------------------
### Create Account Component (Default)
Source: https://github.com/uswds/uswds-site/blob/main/_includes/code/components/create-account.html
Use this snippet to render the default Create Account component.
```html
{% capture layout--create-account %} {% library_component usa-create-account %} {% endcapture %}{{ layout--create-account | strip }}
```
--------------------------------
### Column Wrapping Example
Source: https://github.com/uswds/uswds-site/blob/main/_utilities/layout-grid.md
Items in a grid row will automatically wrap to the next line when the sum of their column widths exceeds 12. This example shows an 8-column item, followed by a 3-column item, and then a 5-column item, causing the last item to wrap.
```html
.grid-col-8
.grid-col-3
.grid-col-5
```
--------------------------------
### Basic Header Implementation
Source: https://github.com/uswds/uswds-site/blob/main/_components/header/header.html
A simple header implementation. Ensure it includes a skip navigation link before the header for accessibility.
```html
Skip to main content
```
--------------------------------
### Configure USWDS Utilities with Settings
Source: https://github.com/uswds/uswds-site/blob/main/_utilities/overview.md
Customize utility output by adding settings to your uswds-core module initialization. This example enables important utilities and configures specific settings for breakpoints, color palettes, and hover states.
```scss
@use "uswds-core" with (
$utilities-use-important: true,
$output-these-utilities: (
"background-color",
"color",
"display",
"margin",
"padding",
),
$theme-utility-breakpoints: (
"mobile-lg": false,
),
$color-settings: (
"hover": false,
),
$color-palettes: (
"palette-color-theme"
),
);
```
--------------------------------
### Text Color Utility Example
Source: https://github.com/uswds/uswds-site/blob/main/_utilities/color.md
Displays text color utility classes with their corresponding tokens and values. Useful for understanding how text colors are applied.
```html
.text-{{ color.token }}
{{ value }}
```
--------------------------------
### Order Token Examples
Source: https://github.com/uswds/uswds-site/blob/main/pages/design-tokens/order.md
These examples demonstrate how order tokens are applied to elements within a flex container to change their visual order. The 'order-initial' class is used for elements that should maintain their default DOM order, while specific order tokens like 'order-1' through 'order-11' are applied to reorder elements.
```html
```