18F UI style guide

Blog

Post previews

Post previews are seen on the home page of 18f.gsa.gov and at the bottom of every blog post for example, this post. This feature provides the user a preview of a blog that includes the publish date, title, an excpert, a link to the full post, and tags.

    •   
<section class="usa-grid-full usa-section posts_feature">
  {% include post.html
    date='January 6, 2017'
    title='Dummy title'
    excerpt='This is an example of a post with plenty of example text to give it length'
    url=dead_end_link
  %}
  {% include post.html
    date='January 7, 2017'
    title='Dummy title 2'
    excerpt='This is an example of a post with plenty of example text to give it length'
    url=dead_end_link
  %}
  {% include post.html
    date='January 8, 2017'
    title='Dummy title 3'
    excerpt='This is an example of a post with plenty of example text to give it length'
    url=dead_end_link
  %}
</section>

    • Post previews are generated dynamically throughout the site. Each preview requires a few attributes:

      • date
      • title
      • excerpt
      • url

    Blog tags

    web design standards design open source 
    •   
<section class="usa-grid-full">
  <span class="post-tags" itemprop="keywords">
    {% for tag in page.tags %}
      <a class="usa-label" href="{{ site.baseurl }}/{{ site.tag_dir }}/{{ tag | slugify }}/">{{ tag }}
      </a>
    {% endfor %}
  </span>
</section>

    • Blog tags are generated and draw from a post’s tags property. Before you use a tag, make sure that it is in the list of acceptable tags.

    Blockquotes

    Blockquote as markdown:

    I’m thankful for a safe workplace that encourages me to raise a hand for help…or a high five. — Micah Taylor

    Our markdown blockquotes support line breaks:

    We recently welcomed the newest group of Presidential Innovation Fellows into the federal government. This diverse group represents some of the nation’s most talented and creative civic-minded innovators.

    More than a thousand candidates applied to serve the country in this unique capacity. From this pool of amazing and incredibly motivated applicants, we selected almost 30 designers, developers, entrepreneurs and executives to bring their unique skills into government.

    Blockquote as HTML:

    I’m thankful for how much I learn every week at 18F — from colleagues, agency partners, and the work itself. — Corey Mahoney

    Pull quotes with and without a team image:

    18F team member Shawn Allen
    “I wanted a new challenge, and I wanted to learn from some of the best minds in design and technology.” - Shawn Allen
    18F logo
    “To work on how technology could improve government service delivery in a deeper way than just as a communications platform.” - Laura Gerhardt 
    •   
#### Blockquote as markdown:
> I'm thankful for a safe workplace that encourages me to raise a hand for help...or a high five. — **Micah Taylor**

#### Our markdown blockquotes support line breaks:
> We recently welcomed the newest group of Presidential Innovation
> Fellows into the federal government. This diverse group represents
> some of the nation’s most talented and creative civic-minded
> innovators.
>
> More than a thousand candidates applied to serve the country in this
> unique capacity. From this pool of amazing and incredibly motivated
> applicants, we selected almost 30 designers, developers, entrepreneurs
> and executives to bring their unique skills into government.

#### Blockquote as HTML:
<blockquote>
  I’m thankful for how much I learn every week at 18F — from colleagues, agency partners, and the work itself. — <strong>Corey Mahoney</strong>
</blockquote>

#### Pull quotes with and without a team image:
<section class="usa-grid-full">
  <div class="pquote">
    {{ "shawn" | team_photo }}
    <blockquote>
  “I wanted a new challenge, and I wanted to learn from some of the best
  minds in design and technology.” - {{ "shawn" | team_link }}
    </blockquote>
  </div>
  <div class="pquote">
  {{ "laura-gerhardt" | team_photo }}
    <blockquote>
      “To work on how technology could improve government service delivery in a deeper way than just as a communications platform.” - {{ "laura-gerhardt" | team_link }}
    </blockquote>
  </div>
</section>

    • Our blockquotes use the kramdown renderer, so please defer to the documentation for details on markdown rendering issues. 18f.gsa.gov does, however, set styles that are unique to 18F Brand for both blockquotes and pull quotes.

      Additional resources:

    Images

    There are a few ways we render images on the blog: Hero images that span the entire page, within blog post, and team photos. For information on adding images to the site see:

    Hero images

    Hero images are used in the primary and blog post layouts.Here is a view of a live example.

    •   
{% include feature-image.html %}

    • If using a layout that needs a feature image, specify the path to the image url with the image attribute.

      When the image is loaded on to the page, it will be given the CSS class .post-feature_image. This will ensure that the image spans the entire width of its surrounding element.

      To add a caption, specify the image_figcaption attribute in the page front matter.

      Additional resources:

    Images within blog posts

    Images can be any visual that supports the content of the post. We often use screen shots of platforms, people active in an design thinking excercise or images of people and our team. Below is an example of an image with a caption.

    This long hallway has public art from local artists hanging in it. This is part of the GSA's Fine Arts Program. Photo courtesy: GSA PBS Region 8
    •   
<figure>
  <img src="{{ site.baseurl }}/assets/blog/denver/gallery-41.jpg" alt="">
  <figcaption>This long hallway has public art from local artists hanging in it. This is part of the GSA's <a href="http://www.gsa.gov/fa/">Fine Arts Program.</a> Photo courtesy: GSA PBS Region 8</figcaption>
</figure>

    • To add basic images to a blog post:

      • Use <figure> tag for all blog images. To learn more about this tag go to the developer page on mozilla
      • Use <figcaption></figcaption> tags for image captions. This is a preferred practice but is optional.
      • Use the alt tag to provide screen readable captions for images that do not have a caption.
      • If images have a caption, they do not need alt text. To make sure that browsers know this, specify alt=""
      • Make sure to prepend image path with `` to ensure that the file path is pointed to the correct spot.
      • Add the class=image-shadowed CSS class to give images with white backgrounds addition depth. This blog post is a live example.
      • If images are are small, use the class="align-left" example: <figure class="align-left>. This blog post is a live example.

      Additional resources:

    Adding a team photo

    Any 18F team member listed in the /assets/img/team/ directory can be referenced directly in markdown or HTML.

    Referencing a team member who has a photo

    18F team member Brian Hedberg

    Referencing a team member who does not have a photo

    18F logo

    •   
#### Referencing a team member who has a photo
{{ 'brian' | team_photo }}

#### Referencing a team member who does not have a photo
{{ 'greg' | team_photo }}

    • The team photo is created by using a custom Jekyll filter called team_photo that allows us to access images programmaticaly without using an img tag explicitly. If an image isn’t working, make sure that the text use for the filter directly matches the image title for the team member in question.

      In the above example {{ 'brian' | team_photo }}, references /assets/img/team/brian.jpg and places it in an img tag.

      See the code to better understand what is going on.

      Additional resources: