### Example URL with Query String

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_ia/url-standards.md

Demonstrates a typical URL structure including a query string with multiple parameters. The '?' signifies the start of the query string, and parameters are separated by '&'.

```text
https://www.va.gov/search/?page=1&query=disability+compensation&t=true
```

--------------------------------

### Install Dependencies (Bash)

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/CLAUDE.md

These commands are used to set up the development environment by installing necessary Node.js and Ruby dependencies. Ensure you have Node.js and Ruby installed before running.

```bash
# Setup
yarn install                    # Install Node dependencies
bundle install                  # Install Ruby gems (requires Ruby 3.3.8)
```

--------------------------------

### Install Component Library using Yarn

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_about/developers/install.md

Installs the VA Design System's Web Component library package into your project using yarn. This dependency provides the reusable web components.

```bash
yarn add @department-of-veterans-affairs/component-library
```

--------------------------------

### Grid Layout Examples (HTML)

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_foundation/layout/html/grid.html

Demonstrates various column layouts using HTML for a grid system. These examples showcase different fractions of the grid, such as one half, one third, and one fourth, typically used for content structuring.

```HTML
<div class="grid-example">
  <div>
    <div>One Half</div>
  </div>
  <div>
    <div>One Half</div>
  </div>
</div>

<div class="grid-example">
  <div>
    <div>One Third</div>
  </div>
  <div>
    <div>One Third</div>
  </div>
  <div>
    <div>One Third</div>
  </div>
</div>

<div class="grid-example">
  <div>
    <div>One Fourth</div>
  </div>
  <div>
    <div>One Fourth</div>
  </div>
  <div>
    <div>One Fourth</div>
  </div>
  <div>
    <div>One Fourth</div>
  </div>
</div>
```

--------------------------------

### Install Dependencies for Analytics Reports

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/scripts/metrics/MONTHLY-REPORTS.md

Installs ImageMagick and Ghostscript, which are required for processing PDF reports into images. These are one-time setup commands.

```bash
brew install imagemagick ghostscript
```

--------------------------------

### Build and Start Jekyll Server

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/README.md

Builds the Jekyll site and starts a local development server. This command allows you to preview the documentation site locally. An alternative command is provided if Storybook is not being used.

```bash
yarn start:storybook-static
```

```bash
yarn start
```

--------------------------------

### Install Project Dependencies with Yarn

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/README.md

Installs all the necessary project dependencies using the Yarn package manager. This command should be run after cloning the repository.

```bash
yarn install
```

--------------------------------

### Start Storybook Server for Component Previews

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/README.md

Starts the Storybook server, which provides interactive previews of the design system components. This command should be run in a separate terminal window within the component-library/packages/storybook directory.

```bash
yarn static-storybook-server
```

--------------------------------

### va-pagination Web Component Examples

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/pagination.md

Demonstrates various configurations of the va-pagination web component. These examples showcase default, middle, last, unbounded, and internationalization scenarios.

```html
<va-pagination></va-pagination>
<va-pagination 
  component-id="example-with-middle"
  pages="10"
  max-page-links="5"
  uswds-version="3">
</va-pagination>
<va-pagination 
  component-id="example-with-last"
  pages="10"
  max-page-links="5"
  uswds-version="3">
</va-pagination>
<va-pagination 
  component-id="example-with-unbounded-first"
  pages="10"
  max-page-links="5"
  uswds-version="3">
</va-pagination>
<va-pagination 
  component-id="example-with-unbounded-middle"
  pages="10"
  max-page-links="5"
  uswds-version="3">
</va-pagination>
<va-pagination 
  component-id="example-with-seven-or-less"
  pages="7"
  max-page-links="5"
  uswds-version="3">
</va-pagination>
<va-pagination 
  component-id="example-with-seven-or-less-middle"
  pages="7"
  max-page-links="5"
  uswds-version="3">
</va-pagination>
<va-pagination 
  component-id="example-with-seven-or-less-last"
  pages="7"
  max-page-links="5"
  uswds-version="3">
</va-pagination>
<va-pagination 
  component-id="example-internationalization"
  pages="10"
  max-page-links="5"
  uswds-version="3">
</va-pagination>
```

--------------------------------

### HTML Padding Examples

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_foundation/utilities/padding.md

Demonstrates the application of various padding utility classes for different sides and breakpoints. These examples show how to structure HTML to utilize the system's spacing utilities.

```html
<div class="site-showcase">
  <div class="vads-grid-row">
    <div class="vads-u-padding-2 vads-u-flex-align-center vads-u-measure--wide">
      <p class="vads-u-color--white">.vads-u-padding-2</p>
    </div>
  </div>
</div>
<div class="site-showcase">
  <div class="vads-grid-row">
    <div class="vads-u-padding-top-2 vads-u-flex-align-center vads-u-measure--wide">
      <p class="vads-u-color--white">.vads-u-padding-top-2</p>
    </div>
  </div>
</div>
<div class="site-showcase">
  <div class="vads-grid-row">
    <div class="vads-u-padding-bottom-2 vads-u-flex-align-center vads-u-measure--wide">
      <p class="vads-u-color--white">.vads-u-padding-bottom-2</p>
    </div>
  </div>
</div>
<div class="site-showcase">
  <div class="vads-grid-row">
    <div class="vads-u-padding-right-2 vads-u-flex-align-center vads-u-measure--wide">
      <p class="vads-u-color--white">.vads-u-padding-right-2</p>
    </div>
  </div>
</div>
<div class="site-showcase">
  <div class="vads-grid-row">
    <div class="vads-u-padding-left-2 vads-u-flex-align-center vads-u-measure--wide">
      <p class="vads-u-color--white">.vads-u-padding-left-2</p>
    </div>
  </div>
</div>
<div class="site-showcase">
  <div class="vads-grid-row">
    <div class="vads-u-padding-x-2 vads-u-flex-align-center vads-u-measure--wide">
      <p class="vads-u-color--white">.vads-u-padding-x-2</p>
    </div>
  </div>
</div>
<div class="site-showcase">
  <div class="vads-grid-row">
    <div class="vads-u-padding-y-2 vads-u-flex-align-center vads-u-measure--wide">
      <p class="vads-u-color--white">.vads-u-padding-y-2</p>
    </div>
  </div>
</div>
```

--------------------------------

### Start Development Server (Bash)

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/CLAUDE.md

Commands to build and serve the documentation site locally. `yarn start` builds and serves the site, while `yarn watch` builds with incremental updates for faster development feedback.

```bash
# Development
yarn start                      # Build and serve at localhost:4000
yarn watch                      # Build with incremental updates
yarn build                      # Run Gulp build pipeline only
```

--------------------------------

### Start Jekyll Development Server

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/scripts/metrics/README.md

Command to start the local Jekyll development server. This is used to preview the website, including the metrics dashboard, locally.

```bash
yarn start

```

--------------------------------

### Basic Component Naming and URL Path Examples

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_about/naming/index.md

Provides examples of basic web component names, their documentation titles, and their associated URL paths, showcasing a flat naming structure for simpler components.

```html
<va-table table-type="bordered" is-stacked="false">
  <va-table-row>
    <span>Web Component</span>
    <span>Documentation Title</span>
    <span>URL Path</span>
  </va-table-row>
  <va-table-row>
    <span>va-alert</span>
    <span>Alert</span>
    <span>/components/alert</span>
  </va-table-row>
  <va-table-row>
    <span>va-alert-expandable</span>
    <span>Alert - Expandable</span>
    <span>/components/alert-expandable</span>
  </va-table-row>
  <va-table-row>
    <span>va-modal</span>
    <span>Modal</span>
    <span>/components/modal</span>
  </va-table-row>
  <va-table-row>
    <span>va-pagination</span>
    <span>Pagination</span>
    <span>/components/pagination</span>
  </va-table-row>
</va-table>
```

--------------------------------

### Install Ruby Gems for Jekyll

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/README.md

Installs the required Ruby gems for the Jekyll build process. This step is necessary if you are building the documentation site locally with Jekyll.

```bash
bundle install
```

--------------------------------

### Link Action for Minimal Header Example

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/header/minimal.md

This snippet demonstrates how to create a secondary link action that directs users to an example of the minimal header. It's useful for providing direct access to a live demonstration.

```html
<va-link-action
  href="{{ page.example-link }}"
  text="View an example"
  type="secondary"
></va-link-action>
```

--------------------------------

### Include Component Example Image

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/template.md

Embeds an example image of a component in use, with associated alt text and a caption. This helps users visualize the component in a real-world context.

```html
<!-- include component-example.html alt="Explain what is in the image." file="/images/components/component-name/filename.png" caption="Describe what this example image is depicting." -->
```

--------------------------------

### Install CSS-Library using Yarn

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_about/developers/install.md

Installs the VA Design System CSS-Library package into your project using the yarn package manager. This is the first step to integrating the CSS-Library's styles and utilities.

```bash
yarn add @department-of-veterans-affairs/css-library
```

--------------------------------

### HTML Link Formatting Example - Vets Design System

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_content-style-guide/links.md

Demonstrates correct and incorrect HTML structures for link lists. The 'like this' example shows a link placed on its own line for clarity, while the 'not this' example illustrates how to avoid linking each list item individually to the same destination, which can be confusing.

```html
<div class="do-dont">
<div class="do-dont__do">
<h3 class="do-dont__heading">Like this</h3>
<div class="do-dont__content" markdown="1">
  
__Use natural language, and link relevant words__
  
If your disability gets worse, you can file for an increase in compensation.  
[File for a VA disability compensation increase](https://va.gov/disability/how-to-file-claim/)
  
Apply for a United States burial flag to place over a casket or coffin, or place with an urn.  
[Learn more about burial flags](https://www.va.gov/burials-memorials/memorial-items/burial-flags/)

</div>
</div>
<div class="do-dont__dont">
<h3 class="do-dont__heading">Not this</h3>
<div class="do-dont__content" markdown="1">
  
__Avoid "click here" and generic CTA text__

[Click here](https://va.gov/disability/how-to-file-claim/) to file for a VA disability compensation increase if your disability gets worse.

Apply for a United States burial flag to place over a casket or coffin, or place with an urn. 
[Learn more](https://www.va.gov/burials-memorials/memorial-items/burial-flags/)
  
</div>
</div>
</div>
```

```html
Put links on their own line
<ul>
  <li>Trouble breathing</li>
  <li>Persistent (continuing) pain or pressure in the chest</li>
  <li>Bluish lips or face</li>
</ul>
<a href="https://www.cdc.gov/coronavirus/2019-ncov/symptoms-testing/symptoms.html">Check COVID-19 symptoms on the CDC website</a>
```

```html
Avoid linking each item in a list to the same destination
<ul>
  <li><a href="https://www.cdc.gov/coronavirus/2019-ncov/symptoms-testing/symptoms.html">Trouble breathing</a></li>
  <li><a href="https://www.cdc.gov/coronavirus/2019-ncov/symptoms-testing/symptoms.html">Persistent (continuing) pain or pressure in the chest</a></li>
  <li><a href="https://www.cdc.gov/coronavirus/2019-ncov/symptoms-testing/symptoms.html">Bluish lips or face</a></li>
</ul>
```

--------------------------------

### Import Component Library Global CSS

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_about/developers/install.md

Imports the global CSS file from the installed component library. This ensures that the base styles for all web components are loaded into your application.

```javascript
import "@department-of-veterans-affairs/component-library/dist/main.css";
```

--------------------------------

### Sign-in Alert Examples - Nunjucks

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/alert/alert-sign-in.md

This Nunjucks include demonstrates various examples of the Sign-in Alert component, showcasing different use cases and configurations for user sign-in flows.

```html
{% include content/sign-in-alert-examples.md %}
```

--------------------------------

### HTML Lists Examples - VA Design System

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/list.md

Demonstrates simple and complex unordered and ordered lists using HTML. These examples are intended for frontend developers to integrate list structures into VA.gov.

```html
<div class="site-showcase">
  {% include_relative html/lists.html %}
</div>

<div class="site-showcase">
  {% include_relative html/unordered-list-decision-letters.html %}
</div>
```

--------------------------------

### Import CSS-Library Stylesheets

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_about/developers/install.md

Imports the core CSS, typography, and utility stylesheets from the installed CSS-Library. These imports should be placed in your project's main CSS or SCSS file.

```css
@import "@department-of-veterans-affairs/css-library/dist/stylesheets/core";
@import "@department-of-veterans-affairs/css-library/dist/stylesheets/uswds-typography";
@import "@department-of-veterans-affairs/css-library/dist/stylesheets/utilities";
```

--------------------------------

### Web Component Naming and URL Path Examples

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_about/naming/index.md

Demonstrates the relationship between web component tags, their corresponding documentation titles, and their URL paths, illustrating hierarchical naming conventions.

```html
<va-table table-type="bordered" is-stacked="false">
  <va-table-row>
    <span>Web Component</span>
    <span>Documentation Title</span>
    <span>URL Path</span>
  </va-table-row>
  <va-table-row>
    <span>va-link variant="action" type="primary-entry"</span>
    <span>Link - Action - Primary entry</span>
    <span>/components/link/action#primary-entry</span>
  </va-table-row>
  <va-table-row>
    <span>va-button big</span>
    <span>Button - Primary - Big</span>
    <span>/components/button/primary#big</span>
  </va-table-row>
  <va-table-row>
    <span>va-radio-button tile=true</span>
    <span>Radio Button - Tile</span>
    <span>/components/form/radio-button#tile</span>
  </va-table-row>
</va-table>
```

--------------------------------

### va-sidenav Component Examples

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/sidenav.md

Demonstrates various ways to implement the va-sidenav component, including default, categorized, and nested link structures. These examples are intended for use within a web component environment.

```html
<va-alert status="info">
  <h2 slot="headline">Enhancements planned, feedback welcome</h2>
  <p>This component is available for use and will continue to evolve with additional features and functionality. It is planned to replace several existing side navigation implementations across VA.gov to promote consistency and improve usability.</p>
  <p>If you want to help us continue to improve this component, <a href="https://github.com/department-of-veterans-affairs/vets-design-system-documentation/discussions/4252">join the discussion</a>!</p>
</va-alert>

## Examples

### Default
{% include storybook-preview.html story="components-va-sidenav--default" link_text="va-sidenav Default" %}

### Categorized Links
{% include storybook-preview.html story="components-va-sidenav--categorized-links" link_text="va-sidenav Categorized Links" %}

### Nested Links
{% include storybook-preview.html story="components-va-sidenav--nested-links" link_text="va-sidenav Nested Links" %}
```

--------------------------------

### Table Examples (HTML/Liquid)

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/table.md

This snippet demonstrates various examples of the VA Table component using HTML and Liquid templating. It includes default, custom markup, missing data, pagination, and sortable table variations. These examples are intended for previewing the component's appearance and functionality.

```html
{% include storybook-preview.html height="350px" story="uswds-va-table--default" link_text="va-table v3 default"  %}

{% include storybook-preview.html height="650px" story="uswds-va-table--with-custom-markup" link_text="va-table with custom markup" %}

{% include storybook-preview.html height="225px" story="uswds-va-table--with-missing-data" link_text="va-table with missing data" %}

{% include storybook-preview.html height="410px" story="uswds-va-table--with-pagination" link_text="va-table with pagination" %}

{% include storybook-preview.html height="410px" story="uswds-va-table--sortable" link_text="Sortable va-table" %}
```

--------------------------------

### Component Example - Footer Image

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/footer/index.md

Renders an example image of the Footer component with associated alt text and caption. This is used to visually demonstrate the component's appearance at different viewport widths.

```html
{% include component-example.html alt="The VA.gov header at mobile viewport width." file="/images/components/footer/footer-mobile.png" caption="At mobile viewport width for unauthenticated users the VA.gov footer collapses the navigation into accordions." class="x2" %}
```

```html
{% include component-example.html alt="The VA.gov footer at desktop viewport width." file="/images/components/footer/footer-desktop.png" caption="At desktop viewport width for unauthenticated users the VA.gov footer exposes navigation sections and language assistance." %}
```

--------------------------------

### Web Button Examples - Default and Variations

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/button/index.md

Demonstrates various styles of web buttons, including primary, secondary, big, continue, back, and loading states. These examples showcase the default appearance and common variations used in web applications.

```html
<!-- Default - Primary -->
{% include storybook-preview.html height="60px" story="uswds-va-button--primary" link_text="va-button--primary" %}

<!-- Default - Secondary -->
{% include storybook-preview.html height="60px" story="uswds-va-button--secondary" link_text="va-button--secondary" %}

<!-- Default - Big -->
{% include storybook-preview.html height="80px" story="uswds-va-button--big" link_text="va-button--big" %}

<!-- Continue -->
{% include storybook-preview.html height="60px" story="uswds-va-button--continue" link_text="va-button--continue" %}

<!-- Back -->
{% include storybook-preview.html height="60px" story="uswds-va-button--back" link_text="va-button--back" %}

<!-- Loading -->
{% include storybook-preview.html height="60px" story="uswds-va-button--loading" link_text="va-button--loading" %}
```

--------------------------------

### Include Component Example - Jekyll/Liquid

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_patterns/ask-users-for/feedback.md

This snippet demonstrates how to include a component example within a Jekyll/Liquid template. It's used to display images and captions for UI components, specifying the file path, alternative text, and caption for accessibility and context.

```html
{% include component-example.html alt="About VA health benefits page screenshot with call-outs." file="/images/patterns/ask-users-for/feedback/feedback-anatomy.png" caption="Page anatomy showing the placement for the feedback button." width="50%" %}
```

--------------------------------

### Web Link Examples - Vets Design System

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/link/index.md

Demonstrates various web link types including Default, Back, Active, Calendar, Channel, Download, External, and Video. These examples showcase the visual appearance and potential use cases for each link variant within a web interface.

```html
<va-link href="#" text="va-link"></va-link>
<va-link href="#" text="back va-link" back="true"></va-link>
<va-link href="#" text="active va-link" active="true"></va-link>
<va-link href="#" text="calendar va-link" calendar="true"></va-link>
<va-link href="#" text="channel va-link" channel="true"></va-link>
<va-link href="#" text="download va-link" download="true"></va-link>
<va-link href="#" text="external va-link" external="true"></va-link>
<va-link href="#" text="video va-link" video="true"></va-link>
```

--------------------------------

### Combo Box Component Examples (HTML)

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/form/combo-box.md

Demonstrates various states and configurations of the va-combo-box web component, including default, with default value, with error, required, with placeholder text, with hint text, and with ARIA described by message. These examples are intended for preview within a Storybook environment.

```html
<va-combo-box story="uswds-va-combo-box--default" link_text="va-combo-box default" height="300px"></va-combo-box>
<va-combo-box story="uswds-va-combo-box--with-default-value" link_text="va-combo-box with default value" height="300px"></va-combo-box>
<va-combo-box story="uswds-va-combo-box--with-error" link_text="va-combo-box with error" height="300px"></va-combo-box>
<va-combo-box story="uswds-va-combo-box--required" link_text="va-combo-box required" height="300px"></va-combo-box>
<va-combo-box story="uswds-va-combo-box--with-placeholder-text" link_text="va-combo-box with placeholder text" height="300px"></va-combo-box>
<va-combo-box story="uswds-va-combo-box--with-hint-text" link_text="va-combo-box with hint text" height="300px"></va-combo-box>
<va-combo-box story="uswds-va-combo-box--with-message-aria-described-by" link_text="uswds-va-combo-box with message aria described by" height="300px"></va-combo-box>
```

--------------------------------

### HTML Text Align Utility Example

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_foundation/utilities/text-align.md

Demonstrates the usage of text alignment utility classes in HTML, including responsive prefixes. This example shows how to align text to the left by default and center on larger breakpoints.

```html
<div class="vads-u-text-align--left desktop-lg:vads-u-text-align--center">
</div>
```

--------------------------------

### Default Tabs Example - Web Components

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/tabs.md

Demonstrates the default appearance and functionality of the va-tabs component. This example is intended for web implementation.

```html
<va-tabs>
  <va-tab id="tab1">Tab 1</va-tab>
  <va-tab id="tab2">Tab 2</va-tab>
  <va-tab id="tab3">Tab 3</va-tab>
</va-tabs>
<va-tab-panel id="panel1">Content for Tab 1</va-tab-panel>
<va-tab-panel id="panel2">Content for Tab 2</va-tab-panel>
<va-tab-panel id="panel3">Content for Tab 3</va-tab-panel>
```

--------------------------------

### Install ImageMagick and Ghostscript on Ubuntu/Debian

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/scripts/metrics/MONTHLY-REPORTS.md

Installs ImageMagick and Ghostscript on Ubuntu or Debian-based systems using apt-get. Requires sudo privileges.

```bash
sudo apt-get install imagemagick ghostscript
```

--------------------------------

### Language Toggle Component Examples

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/language-toggle.md

Demonstrates the default and two-language variations of the language toggle component. These examples utilize a storybook-preview include to render the component with different configurations.

```html
{% include storybook-preview.html story="components-va-language-toggle--default" link_text="Language toggle" %}

{% include storybook-preview.html story="components-va-language-toggle--two-languages" link_text="Language toggle" %}
```

--------------------------------

### HTML Example: Like This vs. Not This Content

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_content-style-guide/content-principles/index.md

This snippet demonstrates how to use HTML markdown within a Liquid capture to showcase examples of 'like this' and 'not this' content for improving clarity and conciseness. It's used with a Jekyll include to display the comparison.

```html
<div markdown="1">
  If you limit consent, it may take us longer to get your records. Your doctor will follow the limits you specify.
</div>
```

```html
<div markdown="1">
  The attending physician will abide by the limitation the Veteran specifies. If the Veteran opts to limit consent, please note it may take longer for VA to receive the Veteran’s records.
</div>
```

```html
<div markdown="1">
  Accept the terms of use to sign in.
</div>
```

```html
<div markdown="1">
  Unless you accept the terms of use, you will not be able to sign in.
</div>
```

--------------------------------

### Mobile App Link Examples - Vets Design System

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/link/index.md

Provides examples of mobile app link types, including Default, Attachment, Calendar, Directions, External, Phone, Phone TTY, and Text (SMS). These examples illustrate how links are rendered and function within a mobile application context.

```html
<va-mobile__link--default link_text="va-mobile__link--default"></va-mobile__link--default>
<va-mobile__link--attachment link_text="va-mobile__link--attachment"></va-mobile__link--attachment>
<va-mobile__link--calendar link_text="va-mobile__link--calendar"></va-mobile__link--calendar>
<va-mobile__link--directions link_text="va-mobile__link--directions"></va-mobile__link--directions>
<va-mobile__link--external link_text="va-mobile__link--external"></va-mobile__link--external>
<va-mobile__link--phone link_text="va-mobile__link--phone"></va-mobile__link--phone>
<va-mobile__link--phone-tty link_text="va-mobile__link--phone-tty"></va-mobile__link--phone-tty>
<va-mobile__link--text link_text="va-mobile__link--text"></va-mobile__link--text>
```

--------------------------------

### Card Component Examples

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/card.md

This snippet demonstrates various configurations of the Card component, including default, with background, with drop shadow, and with an icon. These examples showcase the component's flexibility in presenting different types of information.

```html
<va-card>
  Default card content
</va-card>

<va-card background>
  Card with background
</va-card>

<va-card shadow>
  Card with drop shadow
</va-card>

<va-card>
  <span slot="icon">⭐</span>
  Card with icon
</va-card>
```

--------------------------------

### Process Monthly Analytics Report - Example Usage

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/scripts/metrics/MONTHLY-REPORTS.md

Examples demonstrating how to run the monthly report processing commands with specific file paths and dates for June and July 2025.

```bash
# Process June 2025 report
./scripts/add-monthly-report.sh ~/Downloads/VA_Design_System_Top_25_June_2025.pdf 2025-06

# Process July 2025 report  
npm run process-monthly-report ~/Downloads/VA_Design_System_Top_25_July_2025.pdf 2025-07
```

--------------------------------

### Flexbox Utilities: Flex Property Examples

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_foundation/utilities/flexbox.md

Demonstrates the usage of the 'flex' shorthand property in HTML, which encompasses flex-grow, flex-shrink, and flex-basis. It includes guidance on responsive prefixes and different flex ratios.

```html
<div class="vads-u-display--flex">
  <div class="vads-u-flex--1">Flex item 1</div>
  <div class="vads-u-flex--auto">Flex item 2 (auto width)</div>
  <div class="vads-u-flex--fill">Flex item 3</div>
</div>
```

--------------------------------

### Button - Icon Examples using Storybook Preview

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/button/button-icon.md

Demonstrates the usage of the Button - Icon component with different actions like 'Change file', 'Delete', and 'Cancel'. These examples are rendered using Storybook's preview mechanism, specifying the story, link text, and desired height for display.

```html
{% include storybook-preview.html story="components-va-button-icon--change-file" link_text="Change file, used in the File input component" height="75px" %}

```

```html
{% include storybook-preview.html story="components-va-button-icon--delete" link_text="Delete, used in the File input component" height="75px" %}

```

```html
{% include storybook-preview.html story="components-va-button-icon--cancel" link_text="va-button-icon cancel variation" height="75px" %}

```

--------------------------------

### CSS for Grid Examples

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_foundation/layout/html/grid.html

Provides CSS styles for visually representing grid layouts and their contained elements. This includes basic styling for the grid container and its child elements, adding borders and padding for clarity.

```CSS
.grid-example>div {
  margin: 2em 0;
}

.grid-example>div>div {
  border: 1px solid #ccc;
  padding: .75em;
}
```

--------------------------------

### Border Color Utility Examples - HTML

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_foundation/utilities/border.md

Shows examples of applying border color utilities using predefined color tokens from primary, grayscale, tertiary, and hub palettes. Similar to border style, it requires the border shorthand if no border is present.

```html
<h4>Base colors</h4>
<div class="vads-grid-row vads-u-flex-direction--column">
  {% for item in site.data.colors.primary %}
    {% include border-color-example.html
      name=item.name
      token=item.token
    %}
  {% endfor %}
</div>

<h4>Grayscale</h4>
<div class="vads-grid-row vads-u-flex-direction--column">
  {% for item in site.data.colors.grayscale %}
    {% include border-color-example.html
      name=item.name
      token=item.token
    %}
  {% endfor %}
</div>

<h4>Tertiary colors</h4>
<div class="vads-grid-row vads-u-flex-direction--column">
  {% for item in site.data.colors.tertiary %}
    {% include border-color-example.html
      name=item.name
      token=item.token
    %}
  {% endfor %}
</div>

<h4>Hub colors</h4>
<div class="vads-grid-row vads-u-flex-direction--column">
  {% for item in site.data.colors.hub %}
    {% include border-color-example.html
      name=item.name
      token=item.token
    %}
  {% endfor %}
</div>
```

--------------------------------

### Header Component Example - HTML

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/header/index.md

These examples illustrate the visual appearance of the VA.gov header at different viewport widths (mobile and desktop). They are used within documentation to showcase the component's design and layout for authenticated and unauthenticated users.

```html
{% include component-example.html alt="The VA.gov header at mobile viewport width." file="/images/components/header/header-mobile.png" caption="At mobile viewport width for unauthenticated users the VA.gov header shows a sign in link and a menu button." class="x2" reverse="true" %}
```

```html
{% include component-example.html alt="The VA.gov header at desktop viewport width." file="/images/components/header/header-desktop.png" caption="At desktop viewport width for unauthenticated users the VA.gov header exposes search, contact us, and main menu navigation." reverse="true" %}
```

--------------------------------

### Define Custom Elements for Web Components

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_about/developers/install.md

Imports and calls the necessary functions to define and register the custom elements for the Web Component library. `applyPolyfills` is optional for older browser support (e.g., IE11).

```javascript
import {
  applyPolyfills, // Only necessary if you wish to support older browsers such as IE11
  defineCustomElements,
} from "@department-of-veterans-affairs/component-library";

applyPolyfills().then(() => {
  defineCustomElements();
});
```

--------------------------------

### Stencil Unit Test Example

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_about/developers/contributing.md

Illustrates how to write unit tests for Stencil web components. This example uses Jest to test specific functionalities or properties of a component, such as the va-telephone component.

```typescript
import { h } from '@stencil/core';
import { render } from '@testing-library/react';

describe('va-telephone', () => {
  it('renders with default values', () => {
    const page = render(<va-telephone></va-telephone>);
    // Add assertions here
  });
});

```

--------------------------------

### Flexbox Utilities: Align Items Examples

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_foundation/utilities/flexbox.md

Demonstrates the 'align-items' property for controlling the alignment of flex items along the cross-axis of a flex container. It includes examples for stretch, flex-start, flex-end, center, and baseline alignments.

```html
<div class="vads-u-display--flex vads-u-align-items--center" style="height: 100px;">
  <div>Centered Item 1</div>
  <div>Centered Item 2</div>
</div>
```

--------------------------------

### Display Rake Help

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/RAKE_TASKS.md

Shows all available Rake tasks within the project and provides usage examples for each task. This is useful for understanding the available automation capabilities.

```bash
rake help
```

--------------------------------

### Display Text Color Examples - Liquid

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_foundation/utilities/text-color.md

This snippet demonstrates how to display text color examples using Liquid templating language. It iterates through different color data sets (primary, grayscale, tertiary, hub) and includes a 'color-example' partial to render each color swatch with its name and token. This is useful for showcasing available color options within the Vets Design System.

```html
<div class="site-showcase">
  {% include _showcase-header.html
    heading_level=3
    header="Color"
    responsive=false
    css_property="color"
  %}

  <h4>Base colors</h4>
  <div class="vads-grid-row vads-u-flex-direction--column">
    {% for item in site.data.colors.primary %}
      {% include color-example.html
        name=item.name
        token=item.token
      %}
    {% endfor %}
  </div>

  <h4>Grayscale</h4>
  <div class="vads-grid-row vads-u-flex-direction--column">
    {% for item in site.data.colors.grayscale %}
      {% include color-example.html
        name=item.name
        token=item.token
      %}
    {% endfor %}
  </div>

  <h4>Tertiary colors</h4>
  <div class="vads-grid-row vads-u-flex-direction--column">
    {% for item in site.data.colors.tertiary %}
      {% include color-example.html
        name=item.name
        token=item.token
      %}
    {% endfor %}
  </div>

  <h4>Hub colors</h4>
  <div class="vads-grid-row vads-u-flex-direction--column">
    {% for item in site.data.colors.hub %}
      {% include color-example.html
        name=item.name
        token=item.token
      %}
    {% endfor %}
  </div>

</div>
```

--------------------------------

### Flexbox Utilities: Flex Wrap Examples

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_foundation/utilities/flexbox.md

Shows how to control whether flex items wrap onto a new line when they exceed the container's width. This example demonstrates the 'flex-wrap' property and its responsive variations.

```html
<div class="vads-u-display--flex vads-u-flex-wrap--wrap">
  <div class="vads-u-flex--1">Item 1</div>
  <div class="vads-u-flex--1">Item 2</div>
  <div class="vads-u-flex--1">Item 3</div>
  <div class="vads-u-flex--1">Item 4</div>
</div>
```

--------------------------------

### Form Example with Description - HTML

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_patterns/ask-users-for/a-single-response.md

An example of a form element that includes a descriptive section. This is useful for providing context or additional instructions to the user about the form or a specific field. It typically involves an HTML structure that wraps the descriptive text and the form input.

```html
<div class="form-description">
  <p>This is a description for the form or a specific field. It helps users understand what information is needed and why.</p>
</div>
<div class="form-field">
  <label for="example-input">Example Input:</label>
  <input type="text" id="example-input" name="example-input">
</div>
```

--------------------------------

### VA Process List Component - Custom Sizing Example

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/process-list.md

This code demonstrates the VA Process List component with custom sizing applied to its elements. It's intended for Storybook previews and has no external JavaScript dependencies.

```html
<va-process-list story="uswds-va-process-list--custom-sizing"></va-process-list>
```

--------------------------------

### Embed Storybook Example (Jekyll Include)

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_about/contributing/contributing-to-docs.md

This Jekyll include allows embedding Storybook examples for VADS components and variations. It requires specifying the story path and link text. For mobile components, additional parameters like height and an is_mobile flag can be used.

```markdown
{% raw %}{% include storybook-preview.html story="[components|uswds]-VA-COMPONENT-NAME--VARIATION" link_text=page.web-component %}{% endraw %}
```

```markdown
{% raw %}{% include storybook-preview.html height="100px" story="VA-COMPONENT-NAME--VARIATION" link_text="va-mobile__VA-COMPONENT-NAME--VARIATION" is_mobile=true %}{% endraw %}
```

--------------------------------

### Border Shorthand Utility Examples - HTML

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_foundation/utilities/border.md

Demonstrates the use of the border shorthand utility for applying borders to all sides, top, right, bottom, and left. It iterates through predefined width values from site data.

```html
<h3>Border on all sides</h3>
<div class="vads-grid-row">
  {% for item in site.data.borders.widths %}
    {% include border-example.html
      class="border"
      value=item.width
    %}
  {% endfor %}
</div>

<h3>Border top</h3>
<div class="vads-grid-row">
  {% for item in site.data.borders.widths %}
    {% include border-example.html
      class="border-top"
      value=item.width
    %}
  {% endfor %}
</div>

<h3>Border right</h3>
<div class="vads-grid-row">
  {% for item in site.data.borders.widths %}
    {% include border-example.html
      class="border-right"
      value=item.width
    %}
  {% endfor %}
</div>

<h3>Border bottom</h3>
<div class="vads-grid-row">
  {% for item in site.data.borders.widths %}
    {% include border-example.html
      class="border-bottom"
      value=item.width
    %}
  {% endfor %}
</div>

<h3>Border left</h3>
<div class="vads-grid-row">
  {% for item in site.data.borders.widths %}
    {% include border-example.html
      class="border-left"
      value=item.width
    %}
  {% endfor %}
</div>
```

--------------------------------

### Web Radio Button Component Examples

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/form/radio-button.md

Demonstrates various implementations of the `va-radio` web component, including default, tile, hint text, label header, on background, forms patterns, and error states. These examples showcase different ways to use the radio button for user selection in web applications.

```html
<va-radio></va-radio>
<va-radio label="Tile radio button" tile></va-radio>
<va-radio label="Radio with hint" hint="This is a hint."></va-radio>
<va-radio label="Radio with label header" label-header="Group Label"></va-radio>
<va-radio label="On background radio" background></va-radio>
<va-radio label="Forms pattern single"></va-radio>
<va-radio label="Forms pattern multiple"></va-radio>
<va-radio label="Error radio" error="An error occurred."></va-radio>
<va-radio label="Forms pattern single error" error="Single error."></va-radio>
<va-radio label="Internationalization radio"></va-radio>
```

--------------------------------

### BEM Syntax - Combined Example

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_about/naming/css.md

Presents a complete HTML structure utilizing BEM syntax, showing a block ('alert') with a modifier ('alert--success') and nested elements ('alert__header', 'alert__body'). This example showcases the practical application of BEM for semantic and scoped styling.

```html
<div class="alert alert--success">
  <h2 class="alert__header">This is the alert heading</h2>
  <div class="alert__body">
    <p>This is some alert text</p>
  </div>
</div>
```

--------------------------------

### Example of an ineffective complex term definition (Jekyll/Liquid)

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_content-style-guide/plain-language/define-complex-terms.md

This snippet illustrates a less effective way to define a complex term, where the definition is omitted or poorly integrated. It serves as a negative example to contrast with best practices, highlighting how clarity can be lost. This is also presented using Liquid templating.

```liquid
{% capture example_not_this_4 %}
Your premium depends on these factors:
{% endcapture %}
```

--------------------------------

### Breadcrumb Router Link Support Example

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/breadcrumbs.md

This snippet demonstrates how to integrate React Router with breadcrumbs for dynamic navigation. It requires the React Router library and assumes a basic setup for routing.

```jsx
import React from 'react';
import { Breadcrumbs, BreadcrumbItem } from '@uswds/react';
import { Link } from 'react-router-dom';

function MyBreadcrumbs() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem as={Link} to="/">Home</BreadcrumbItem>
      <BreadcrumbItem as={Link} to="/section">Section</BreadcrumbItem>
      <BreadcrumbItem isCurrent>Current Page</BreadcrumbItem>
    </Breadcrumbs>
  );
}

export default MyBreadcrumbs;
```

--------------------------------

### Back to top Component Usage (Web)

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_components/back-to-top.md

This snippet demonstrates the usage of the va-back-to-top web component. It includes an example of how to implement the component in HTML, typically within a web page structure.

```html
<va-back-to-top></va-back-to-top>
```

--------------------------------

### HTML Example: Q&A Pronoun Usage

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_content-style-guide/plain-language/use-pronouns.md

Shows correct pronoun usage in a Question and Answer format, where the Veteran uses 'I' and 'Am I', and the VA uses 'You' and 'we'. This example highlights direct address and avoids generic references.

```html
<strong><span class="do-dont__diff">Am I</span> eligible for Veterans Pension benefits?</strong>
<span class="do-dont__diff">You</span> may be eligible if you meet these requirements.

```

```html
<strong><span class="do-dont__diff">Are Veterans</span> eligible for pension benefits?</strong>
<span class="do-dont__diff">Veterans</span> who meet these requirements may be eligible. 

```

--------------------------------

### Use Sass Mixin for Multiple Breakpoints

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_foundation/breakpoints.md

Provides an example of using the Sass `@media` mixin within a component's selector to apply different styles at various breakpoints. It emphasizes starting with smaller breakpoints and scaling up.

```scss
.some-component {
  margin: units(1);

  @include media($medium-screen) {
    margin: units(2);
  }

  @include media($desktop-lg) {
    margin: units(3);
  }
}
```

--------------------------------

### Use CSS-Library Design Tokens

Source: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/blob/main/src/_about/developers/install.md

Applies a CSS variable from the CSS-Library's design tokens to set the background color of an element. This demonstrates how to leverage the CSS custom properties format for styling.

```html
<link rel="stylesheet" href="@department-of-veterans-affairs/css-library/dist/tokens/css/variables.css">

```

```css
.your-class {
  background-color: var(--vads-color-base);
}
```