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
<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
<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.

City Garden

City Garden is a park in the heart of downtown St. Louis.

Learn more

City Garden

City Garden is a park in the heart of downtown St. Louis.

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
<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>

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.