18F/18f.gsa.gov

---
layout: default
title: 18F UI Styleguide
nav_items:
  - text: Overview
    permalink: /styleguide/
  - text: Layouts
    permalink: /styleguide/layouts/
    children:
      - text: Templates
        permalink: /styleguide/layouts/#templates
      - text: Primary template
        permalink: /styleguide/layouts/#primary-template
      - text: Project page template
        permalink: /styleguide/layouts/#project-page-template
      - text: Blog post template
        permalink: /styleguide/layouts/#blog-post-template
      - text: Grid
        permalink: /styleguide/layouts/#grid
      - text: Sidebar
        permalink: /styleguide/layouts/#sidebar
  - text: Typography
    permalink: /styleguide/typography/
    children:
      - text: Font family
        permalink: /styleguide/typography/#font-family
      - text: Typesetting
        permalink: /styleguide/typography/#typesetting
      - text: Font weights
        permalink: /styleguide/typography/#font-weights
      - text: Links
        permalink: /styleguide/typography/#links
  - text: Colors
    permalink: /styleguide/colors/
    children:
      - text: Palette
        permalink: /styleguide/colors/#palette
      - text: Backgrounds
        permalink: /styleguide/colors/#backgrounds
  - text: Images
    permalink: /styleguide/images/
    children:
      - text: Image formats
        permalink: /styleguide/images/#image-formats
      - text: Using SVGs
        permalink: /styleguide/images/#using-svgs
      - text: SVG include catalog
        permalink: /styleguide/images/#svg-include-catalog
      - text: Adding images
        permalink: /styleguide/images/#adding-images
      - text: Image lists
        permalink: /styleguide/images/#image-lists
      - text: Project page images
        permalink: /styleguide/images/#project-page-images
  - text: Components
    permalink: /styleguide/components/
    children:
      - text: Buttons
        permalink: /styleguide/components/#buttons
      - text: Breadcrumbs
        permalink: /styleguide/components/#breadcrumbs
      - text: Project cards
        permalink: /styleguide/components/#project-cards
      - text: Sticky subnavigation
        permalink: /styleguide/components/#sticky-subnavigation
      - text: Testimonials and fun facts
        permalink: /styleguide/components/#testimonials-and-fun-facts
  - text: Blog components
    permalink: /styleguide/blog-components/
    children:
      - text: Post previews
        permalink: /styleguide/blog-components/#post-previews
      - text: Blog tags
        permalink: /styleguide/blog-components/#blog-tags
      - text: Blockquotes
        permalink: /styleguide/blog-components/#blockquotes
      - text: Images
        permalink: /styleguide/blog-components/#images
  - text: For developers
    permalink: /styleguide/for-developers/
    children:
      - text: Plugin gems
        permalink: /styleguide/for-developers/#plugin-gems
      - text: Custom plugins
        permalink: /styleguide/for-developers/#custom-plugins
---

{% assign dead_end_link = page.permalink | prepend: site.baseurl %}
{% assign github_url_master = "https://github.com/18F/18f.gsa.gov/blob/master/" %}

<div class="position-fixed z-top width-full">
<a class="skipnav" href="#styleguide-content">Skip to main content</a>
{% include banner.html %}
<header class="usa-header usa-header--basic bg-gray-5 width-full">
  <div class="usa-nav-container">
    <div class="usa-navbar height-auto flex-align-center">
      <div class="usa-logo">
        <a class="site-logo media_link" href="{{ site.baseurl }}/styleguide">
          <img src="{{ site.baseurl }}/assets/img/logos/18f-logo.svg" alt="18F
          logo" {% if page.url == '/' %} aria-hidden="true" {% endif %} ></a
        >
        <span class="text-heavy padding-left-1" id="{{ page.title | slugify }}">
          {{ page.title }}
        </span>
      </div>
      <button class="usa-button--accent-cool usa-menu-btn">Menu</button>
    </div>
  </div>
</header>
</div>

<div class="padding-bottom-4 padding-top-9">
  <div class="grid-container padding-top-5">
    <div class="grid-row grid-gap">
      <div class="desktop:grid-col-3 border-right border-base-light">
        {% include navigation/sidenavnew.html nav_items=layout.nav_items nav_class_suffix='-styleguide' %}
      </div>

      <main class="usa-content desktop:grid-col-9 grid-col-12" id="styleguide-content">
        {% if page.subpage %}<h2>{{ page.subpage }}</h2>{% endif %}
        {{ content }}
      </main>
    </div>
  </div>
</div>