<!doctype html>
<html lang="en">
<!-- generated by uswds@2.0.3 -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>USWDS Fractal example document</title>
    <link rel="stylesheet" href="../../dist/css/uswds.min.css">

</head>

<body>
    <a class="usa-skipnav" href="#main-content">Skip to main content</a>

    <div class="usa-banner">
        <div class="usa-accordion">
            <header class="usa-banner__header">
                <div class="usa-banner__inner">
                    <div class="grid-col-auto">
                        <img class="usa-banner__header-flag" src="../../dist/img/us_flag_small.png" alt="U.S. flag">
                    </div>
                    <div class="grid-col-fill tablet:grid-col-auto">
                        <p class="usa-banner__header-text">An official website of the United States government</p>
                        <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
                    </div>
                    <button class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
          <span class="usa-banner__button-text">Here’s how you know</span>
        </button>
                </div>
            </header>
            <div class="usa-banner__content usa-accordion__content" id="gov-banner">
                <div class="grid-row grid-gap-lg">
                    <div class="usa-banner__guidance tablet:grid-col-6">
                        <img class="usa-banner__icon usa-media-block__img" src="../../dist/img/icon-dot-gov.svg" alt="Dot gov">
                        <div class="usa-media-block__body">
                            <p>
                                <strong>The .gov means it’s official.</strong>
                                <br> Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.
                            </p>
                        </div>
                    </div>
                    <div class="usa-banner__guidance tablet:grid-col-6">
                        <img class="usa-banner__icon usa-media-block__img" src="../../dist/img/icon-https.svg" alt="Https">
                        <div class="usa-media-block__body">
                            <p>
                                <strong>The site is secure.</strong>
                                <br> The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="usa-overlay"></div>
    <header class="usa-header usa-header--basic usa-header--megamenu" role="banner">
        <div class="usa-nav-container">
            <div class="usa-navbar">
                <div class="usa-logo" id="basic-mega-logo">
                    <em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Project title</a></em>
                </div>
                <button class="usa-menu-btn">Menu</button>
            </div>
            <nav role="navigation" class="usa-nav">
                <button class="usa-nav__close"><img src="../../dist/img/close.svg" alt="close"></button>
                <ul class="usa-nav__primary usa-accordion">
                    <li class="usa-nav__primary-item">
                        <button class="usa-accordion__button usa-nav__link  usa-current" aria-expanded="false" aria-controls="basic-mega-nav-section-one"><span>Current section</span></button>
                        <div id="basic-mega-nav-section-one" class="usa-nav__submenu usa-megamenu">
                            <div class="grid-row grid-gap-4">
                                <div class="desktop:grid-col-3">
                                    <ul class="usa-nav__submenu-list">
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="desktop:grid-col-3">
                                    <ul class="usa-nav__submenu-list">
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">A very long navigation link that goes onto two lines</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="desktop:grid-col-3">
                                    <ul class="usa-nav__submenu-list">
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="usa-nav__primary-item">
                        <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="basic-mega-nav-section-two"><span>Section</span></button>
                        <div id="basic-mega-nav-section-two" class="usa-nav__submenu usa-megamenu">
                            <div class="grid-row grid-gap-4">
                                <div class="desktop:grid-col-3">
                                    <ul class="usa-nav__submenu-list">
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="desktop:grid-col-3">
                                    <ul class="usa-nav__submenu-list">
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">A very long navigation link that goes onto two lines</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="desktop:grid-col-3">
                                    <ul class="usa-nav__submenu-list">
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#">Navigation link</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="usa-nav__primary-item">
                        <a class="usa-nav__link" href="javascript:void(0)"><span>Simple link</span></a>
                    </li>
                </ul>
                <form class="usa-search usa-search--small ">
                    <div role="search">
                        <label class="usa-sr-only" for="basic-mega-search-field-small">Search small</label>
                        <input class="usa-input" id="basic-mega-search-field-small" type="search" name="search">
                        <button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
                    </div>
                </form>
            </nav>
        </div>
    </header>

    <section class="usa-hero">
        <div class="grid-container">
            <div class="usa-hero__callout">
                <h1 class="usa-hero__heading"><span class="usa-hero__heading--alt">Hero callout:</span>Bring attention to a project priority
                </h1>
                <p>Support the callout with some short explanatory text. You don’t need more than a couple of sentences.</p><a class="usa-button" href="javascript:void(0)">Call to action</a>
            </div>
        </div>
    </section>

    <main class="usa-section usa-content usa-layout-docs" id="main-content">
        <div class="grid-container">
            <div class="grid-row grid-gap">
                <aside class="tablet:grid-col-3 usa-layout-docs__sidenav">
                    <nav>
                        <ul class="usa-sidenav">
                            <li class="usa-sidenav__item">
                                <a href="">Another page</a>
                            </li>
                            <li class="usa-sidenav__item">
                                <a href="" class="usa-current">Current page</a>
                                <ul class="usa-sidenav__sublist">
                                    <li class="usa-sidenav__item">
                                        <a href="">First section</a>
                                    </li>
                                    <li class="usa-sidenav__item">
                                        <a href="" class="usa-current">Second section</a>
                                        <ul class="usa-sidenav__sublist">
                                            <li class="usa-sidenav__item">
                                                <a href="">Grandchild link</a>
                                            </li>
                                            <li class="usa-sidenav__item">
                                                <a href="">Another one</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="usa-sidenav__item">
                                        <a href="">Third section</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="usa-sidenav__item">
                                <a href="">Yet another page</a>
                            </li>
                        </ul>
                    </nav>

                </aside>

                <div class="tablet:grid-col-9 usa-layout-docs__main usa-prose">
                    <h1>This is your page title</h1>

                    <p class="usa-intro">The page heading communicates the main focus of the page. Make your page heading descriptive and keep it succinct.</p>

                    <p class="usa-content">
                        This is the content body where we will test some ordered and unordered lists. Just long enough to wrap to a new line to test content width.

                        <ul>

                            <li>This is a very long sentence that should go to a new line when it is among other pieces of paragraph text.</li>

                            <li>This is a short sentence that isn't long enough to go to a new line.</li>

                            <li>This is the third sentence.</li>

                        </ul>

                        <ol>

                            <li>This is a very long sentence that should go to a new line when it is among other pieces of paragraph text.</li>

                            <li>This is a short sentence that isn't long enough to go to a new line.</li>

                            <li>This is the third sentence.</li>

                        </ol>
                    </p>

                    <section id="accordions" class="usa-prose margin-top-4">
                        <h2>Accordions - Borderless</h2>

                        <div class="usa-accordion">

                            <!-- Use the accurate heading level to maintain the document outline -->
                            <h2 class="usa-accordion__heading">
                                <button class="usa-accordion__button" aria-expanded="true" aria-controls="a1">
      First Amendment
    </button>
                            </h2>
                            <div id="a1" class="usa-accordion__content usa-prose">
                                <p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to
                                    petition the Government for a redress of grievances.</p>

                            </div>

                            <!-- Use the accurate heading level to maintain the document outline -->
                            <h2 class="usa-accordion__heading">
                                <button class="usa-accordion__button" aria-expanded="false" aria-controls="a2">
      Second Amendment
    </button>
                            </h2>
                            <div id="a2" class="usa-accordion__content usa-prose">
                                <p>A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</p>
                                <ul>
                                    <li>This is a list item</li>
                                    <li>Another list item</li>
                                </ul>

                            </div>

                            <!-- Use the accurate heading level to maintain the document outline -->
                            <h2 class="usa-accordion__heading">
                                <button class="usa-accordion__button" aria-expanded="false" aria-controls="a3">
      Third Amendment
    </button>
                            </h2>
                            <div id="a3" class="usa-accordion__content usa-prose">
                                <p>No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.</p>

                            </div>

                            <!-- Use the accurate heading level to maintain the document outline -->
                            <h2 class="usa-accordion__heading">
                                <button class="usa-accordion__button" aria-expanded="false" aria-controls="a4">
      Fourth Amendment
    </button>
                            </h2>
                            <div id="a4" class="usa-accordion__content usa-prose">
                                <p>The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath
                                    or affirmation, and particularly describing the place to be searched, and the persons or things to be seized.</p>

                            </div>

                            <!-- Use the accurate heading level to maintain the document outline -->
                            <h2 class="usa-accordion__heading">
                                <button class="usa-accordion__button" aria-expanded="false" aria-controls="a5">
      Fifth Amendment
    </button>
                            </h2>
                            <div id="a5" class="usa-accordion__content usa-prose">
                                <p>No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual
                                    service in time of War or public danger; nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself,
                                    nor be deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public use, without just compensation.</p>

                            </div>

                        </div>

                    </section>

                    <section id="accordions-bordered" class="usa-prose margin-top-4">
                        <h2>Accordions - Bordered</h2>

                        <div class="usa-accordion usa-accordion--bordered">

                            <!-- Use the accurate heading level to maintain the document outline -->
                            <h2 class="usa-accordion__heading">
                                <button class="usa-accordion__button" aria-expanded="true" aria-controls="b1">
      First Amendment
    </button>
                            </h2>
                            <div id="b1" class="usa-accordion__content usa-prose">
                                Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress
                                of grievances.

                            </div>

                            <!-- Use the accurate heading level to maintain the document outline -->
                            <h2 class="usa-accordion__heading">
                                <button class="usa-accordion__button" aria-expanded="false" aria-controls="b2">
      Second Amendment
    </button>
                            </h2>
                            <div id="b2" class="usa-accordion__content usa-prose">
                                A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

                            </div>

                            <!-- Use the accurate heading level to maintain the document outline -->
                            <h2 class="usa-accordion__heading">
                                <button class="usa-accordion__button" aria-expanded="false" aria-controls="b3">
      Third Amendment
    </button>
                            </h2>
                            <div id="b3" class="usa-accordion__content usa-prose">
                                No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

                            </div>

                            <!-- Use the accurate heading level to maintain the document outline -->
                            <h2 class="usa-accordion__heading">
                                <button class="usa-accordion__button" aria-expanded="false" aria-controls="b4">
      Fourth Amendment
    </button>
                            </h2>
                            <div id="b4" class="usa-accordion__content usa-prose">
                                The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly
                                describing the place to be searched, and the persons or things to be seized.

                            </div>

                            <!-- Use the accurate heading level to maintain the document outline -->
                            <h2 class="usa-accordion__heading">
                                <button class="usa-accordion__button" aria-expanded="false" aria-controls="b5">
      Fifth Amendment
    </button>
                            </h2>
                            <div id="b5" class="usa-accordion__content usa-prose">
                                No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public
                                danger; nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or
                                property, without due process of law; nor shall private property be taken for public use, without just compensation.

                            </div>

                        </div>

                    </section>

                </div>
            </div>
        </div>
    </main>

    <section class="usa-graphic-list usa-section usa-section--dark">
        <div class="grid-container">
            <div class="usa-graphic-list__row grid-row grid-gap">
                <div class="usa-media-block tablet:grid-col">
                    <img class="usa-media-block__img" src="../../dist/img/circle-124.png" alt="Alt text">
                    <div class="usa-media-block__body">
                        <h3 class="usa-graphic-list__heading">Graphic headings can vary.</h3>
                        <p>Graphic headings can be used a few different ways, depending on what your landing page is for. Highlight your values, specific program areas, or results.</p>
                    </div>
                </div>
                <div class="usa-media-block tablet:grid-col">
                    <img class="usa-media-block__img" src="../../dist/img/circle-124.png" alt="Alt text">
                    <div class="usa-media-block__body">
                        <h3 class="usa-graphic-list__heading">Stick to 6 or fewer words.</h3>
                        <p>Keep body text to about 30 words. They can be shorter, but try to be somewhat balanced across all four. It creates a clean appearance with good spacing.</p>
                    </div>
                </div>
            </div>
            <div class="usa-graphic-list__row grid-row grid-gap">
                <div class="usa-media-block tablet:grid-col">
                    <img class="usa-media-block__img" src="../../dist/img/circle-124.png" alt="Alt text">
                    <div class="usa-media-block__body">
                        <h3 class="usa-graphic-list__heading">Never highlight anything without a goal.</h3>
                        <p>For anything you want to highlight here, understand what your users know now, and what activity or impression you want from them after they see it.</p>
                    </div>
                </div>
                <div class="usa-media-block tablet:grid-col">
                    <img class="usa-media-block__img" src="../../dist/img/circle-124.png" alt="Alt text">
                    <div class="usa-media-block__body">
                        <h3 class="usa-graphic-list__heading">Could also have 2 or 6.</h3>
                        <p>In addition to your goal, find out your users’ goals. What do they want to know or do that supports your mission? Use these headings to show those.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="usa-footer" role="contentinfo">
        <div class="grid-container usa-footer__return-to-top">
            <a href="#">Return to top</a>
        </div>
        <div class="usa-footer__primary-section">
            <nav class="usa-footer__nav">
                <ul class="add-list-reset grid-row grid-gap">
                    <li class="mobile-lg:grid-col-4 desktop:grid-col-2 usa-footer__primary-content">
                        <a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
                    </li>
                    <li class="mobile-lg:grid-col-4 desktop:grid-col-2 usa-footer__primary-content">
                        <a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
                    </li>
                    <li class="mobile-lg:grid-col-4 desktop:grid-col-2 usa-footer__primary-content">
                        <a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
                    </li>
                    <li class="mobile-lg:grid-col-4 desktop:grid-col-2 usa-footer__primary-content">
                        <a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
                    </li>
                    <li class="mobile-lg:grid-col-4 desktop:grid-col-2 usa-footer__primary-content">
                        <a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="usa-footer__secondary-section">
            <div class="grid-container">
                <div class="grid-row grid-gap">
                    <div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
                        <div class="mobile-lg:grid-col-auto">
                            <img class="usa-footer__logo-img" src="../../dist/img/logo-img.png" alt="">
                        </div>
                        <div class="mobile-lg:grid-col-auto">
                            <h3 class="usa-footer__logo-heading">Name of Agency</h3>
                        </div>
                    </div>
                    <div class="usa-footer__contact-links mobile-lg:grid-col-6">
                        <div class="usa-footer__social-links grid-row grid-gap-1">
                            <div class="grid-col-auto">
                                <a class="usa-social-link usa-social-link--facebook" href="javascript:void(0);">
                <span>Facebook</span>
              </a>
                            </div>
                            <div class="grid-col-auto">
                                <a class="usa-social-link usa-social-link--twitter" href="javascript:void(0);">
                <span>Twitter</span>
              </a>
                            </div>
                            <div class="grid-col-auto">
                                <a class="usa-social-link usa-social-link--youtube" href="javascript:void(0);">
                <span>YouTube</span>
              </a>
                            </div>
                            <div class="grid-col-auto">
                                <a class="usa-social-link usa-social-link--rss" href="javascript:void(0);">
                <span>RSS</span>
              </a>
                            </div>
                        </div>
                        <h3 class="usa-footer__contact-heading">Agency Contact Center</h3>
                        <address class="usa-footer__address">
            <div class="usa-footer__contact-info grid-row grid-gap">
              <div class="grid-col-auto">
                <a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
              </div>
              <div class="grid-col-auto">
                <a href="mailto:info@agency.gov">info@agency.gov</a>
              </div>
            </div>
          </address>
                    </div>
                </div>
            </div>
        </div>
    </footer>

</body>

</html>

There are no notes for this item.

{% extends 'layouts/_base.njk' %}

{% block body %}

  {% for spec in before %}
    {% render '@' + spec.component, spec.context, true %}
  {% endfor %}

  <main class="usa-section usa-content usa-layout-docs" id="main-content">
    <div class="grid-container">
      <div class="grid-row grid-gap">
        <aside class="tablet:grid-col-3 usa-layout-docs__sidenav">
          {% render '@sidenav', {sidenav: sidenav} %}
        </aside>

        <div class="tablet:grid-col-9 usa-layout-docs__main usa-prose">
          <h1>{{ page.title }}</h1>

          <p class="usa-intro">{{ page.lead }}</p>

          <p class="usa-content">
            {{ page.body }}

            <ul>
            {% for list in page.lists %}
              <li>{{ list }}</li>
            {% endfor %}
            </ul>

            <ol>
            {% for list in page.lists %}
              <li>{{ list }}</li>
            {% endfor %}
            </ol>
          </p>

          {% for spec in inner %}
          <section id="{{ spec.id }}" class="usa-prose margin-top-4">
            <h2>{{ spec.title }}</h2>
            {% if spec.include %}
              {% include spec.include %}
            {% elseif spec.component %}
              {% render '@' + spec.component, spec.context, spec.merge %}
            {% else %}
              {{ spec.content }}
            {% endif %}
          </section>
          {% endfor %}
        </div>
      </div>
    </div>
  </main>

  {% for spec in after %}
    {% render '@' + spec.component, spec.context, true %}
  {% endfor %}

{% endblock %}
package:
  name: uswds
  version: 2.0.3
uswds:
  path: ../../dist
page:
  title: This is your page title
  lead: >-
    The page heading communicates the main focus of the page. Make your page
    heading descriptive and keep it succinct.
  body: >-
    This is the content body where we will test some ordered and unordered
    lists. Just long enough to wrap to a new line to test content width.
  lists:
    - >-
      This is a very long sentence that should go to a new line when it is among
      other pieces of paragraph text.
    - This is a short sentence that isn't long enough to go to a new line.
    - This is the third sentence.
before:
  - component: hero
    context: {}
sidenav:
  links:
    - text: Another page
    - text: Current page
      current: true
      links:
        - text: First section
        - text: Second section
          current: true
          links:
            - text: Grandchild link
            - text: Another one
        - text: Third section
    - text: Yet another page
inner:
  - title: Accordions - Borderless
    id: accordions
    component: accordion
  - title: Accordions - Bordered
    id: accordions-bordered
    component: accordion--bordered
    context:
      accordion:
        variant: bordered
        items:
          - title: First Amendment
            id: b1
            expanded: true
            content: >
              Congress shall make no law respecting an establishment of
              religion, or prohibiting the free exercise thereof; or abridging
              the freedom of speech, or of the press; or the right of the people
              peaceably to assemble, and to petition the Government for a
              redress of grievances.
          - title: Second Amendment
            id: b2
            content: >
              A well regulated Militia, being necessary to the security of a
              free State, the right of the people to keep and bear Arms, shall
              not be infringed.
          - title: Third Amendment
            id: b3
            content: >
              No Soldier shall, in time of peace be quartered in any house,
              without the consent of the Owner, nor in time of war, but in a
              manner to be prescribed by law.
          - title: Fourth Amendment
            id: b4
            content: >
              The right of the people to be secure in their persons, houses,
              papers, and effects, against unreasonable searches and seizures,
              shall not be violated, and no Warrants shall issue, but upon
              probable cause, supported by Oath or affirmation, and particularly
              describing the place to be searched, and the persons or things to
              be seized.
          - title: Fifth Amendment
            id: b5
            content: >
              No person shall be held to answer for a capital, or otherwise
              infamous crime, unless on a presentment or indictment of a Grand
              Jury, except in cases arising in the land or naval forces, or in
              the Militia, when in actual service in time of War or public
              danger; nor shall any person be subject for the same offence to be
              twice put in jeopardy of life or limb; nor shall be compelled in
              any criminal case to be a witness against himself, nor be deprived
              of life, liberty, or property, without due process of law; nor
              shall private property be taken for public use, without just
              compensation.
after:
  - component: graphic-list
    context:
      graphics: []