Skip to main content
U.S. flag

An official website of the United States government

Dot gov

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Https

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

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.

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

18f.gsa.gov

An official website of the GSA’s Technology Transformation Services

Looking for U.S. government information and services?
Visit USA.gov