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>

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

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.