GOV
Content Blocks
Draw attention to or bundle a section of content
Overview
Content blocks can be used to call out content or to break content up into visible chunks. Below we have a .content-block div and an .instructions div.
More Info: Requests take 2 - 3 days to process.
2
3
4
5
6
7
8
9
10
<div class="content-block"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="instructions"> <p> <strong>More Info:</strong> Requests take 2 - 3 days to process. </p> </div>
Images
The .content-block divs can have images that span the full width by giving the image the class .full-width.
City Garden is a park in the heart of downtown St. Louis.
City Garden is a park in the heart of downtown St. Louis.
2
3
4
5
6
7
8
9
10
11
12
<div class="content-block"> <img src="/images/city-garden-500x333_5.jpg"> <p> City Garden is a park in the heart of downtown St. Louis. </p> </div> <div class="content-block"> <img src="/images/city-garden-500x333_5.jpg" class="full-width"> <p> City Garden is a park in the heart of downtown St. Louis. </p> </div>
Promos
If the content block is meant to feature something and link to it, we can add the class .small-promo, which gives it a shadow and makes it more obvious that this contains a link.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="row"> <div class="col-md-6"> <div class="content-block small-promo"> <h3><a href="#">City Garden</a></h3> <p> City Garden is a park in the heart of downtown St. Louis. </p> <p> <a href="#">Learn more</a> </p> </div> </div> <div class="col-md-6"> <div class="content-block small-promo"> <a href="#"> <img src="/images/city-garden-500x333_5.jpg" class="full-width"> </a> <h3><a href="#">City Garden</a></h3> <p> City Garden is a park in the heart of downtown St. Louis. </p> </div> </div> </div>
Component List
Alerts
Alerts, announcements, updates, information
Labels and Badges
Labels, tags, badges, counts, etc
Link Buttons
Links that look like buttons
List Groups
Displaying lists of links
Statistics
Highlighting numbers of things
Website Components
Buttons, alerts, forms, and various other page elements
