18F site style guide

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.

Blog tags

Hero images

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

The 18F team gathered in the GSA building in May 2016.

  
{% 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:

SCSS references

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.