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.

<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, specifyalt=""
- 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: