Content block

Code

Content blocks are used in conjunction with the bootstrap grid to size the elements as necessary. See the Demo of combinations section below to see how the elements are placed within the grid.

<!-- Lead CTA block -->
<div class="row">
    <div class="col-md-12">
        <div class="cui content-block lead-CTA horizontal">
            <div class="photo-content" style="background-image: url( 'image.jpg' );"></div>
            <div class="content-container">
                <h3 class="h3">Title goes here neque porro quisquam est qui dolorem ipsum </h3>
                <p>Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.</p>
                <button class="cui btn-md primary">Medium primary</button>
            </div>
        </div>
    </div>
</div>

<!-- Vertical block -->
<div class="row">
    <div class="col-lg-4 col-md-12">
        <div class="cui content-block related-CTA vertical">
            <div class="photo-content" style="background-image: url( 'image.jpg' );"></div>
            <div class="content-container">
                <h3 class="h4"><a href="#">Title goes here neque porro quisquam est qui dolorem ipsum </a></h3>
                <p>Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.</p>
            </div>
        </div>
    </div>
</div>

<!-- Horizontal block -->
<div class="row">
    <div class="col-md-12">
        <div class="cui content-block related-CTA horizontal">
            <div class="photo-content" style="background-image: url( 'image.jpg' );"></div>
            <div class="content-container">
                <h3 class="h4"><a href="#">Title goes here neque porro quisquam est qui dolorem ipsum </a></h3>
                <p>Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.</p>
            </div>
        </div>
    </div>
</div>

Usage

Content blocks contain images, text, buttons, and links.

• Assists web users in identifying related content;
• Highlights a topic for web users; and
• Consistent with design principles of proximity and chunking to increase information comprehension among web users.

Image size:
940 × 440px. The container for the image may clip the edges of the image at various screen sizes. Try not to have important elements close to the edges of the image.