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

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

Help Us Improve This Page

Did you notice an error? Is there information that you expected to find on this page, but didn't? Let us know below, and we'll work on it.

Was this page helpful?



Comments are helpful!
500 character limit

Feedback is anonymous.