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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
More Info: Requests take 2 - 3 days to process.
Content block and instructions (10 lines)
1
2
3
4
5
6
7
8
9
10
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.
Content block images (12 lines)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div class="content-block"> <img src="/images/city-garden-500x333_5.jpg" title=""> <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" title=""> <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.
Content block promos (24 lines)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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" title=""> </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>
Feedback is anonymous.
