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>

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.