Skip to main content

Blocks

.block is a base class with several modifiers that help you separate chunks of content via margin, padding, border, and background.

This page is under active development. Information is being moved into it from these pages:

https://cfpb.github.io/capital-framework/components/cf-layout/#block

Standard block example

The standard .block class by itself simply adds a margin of twice the gutter width to the top and bottom.

Main content...
Content block
Content block
Content block

HTML code snippet

Main content...
<div class="block">
    Content block
</div>
<div class="block">
    Content block
</div>
<div class="block">
    Content block
</div>

Border top modifier

Adds top border to .block.

Main content...
Content block with top border.

HTML code snippet

Main content...
<div class="block block__border-top">
    Content block with top border.
</div>

Jinja code snippet

Border right modifier

Adds right border to .block.

Main content...
Content block with right border.

HTML code snippet

Main content...
<div class="block block__border-right">
    Content block with right border.
</div>

Border bottom modifier

Adds bottom border to .block.

Main content...
Content block with bottom border.

HTML code snippet

Main content...
<div class="block block__border-bottom">
    Content block with bottom border.
</div>

Border left modifier

Adds left border to .block.

Main content...
Content block with left border.

HTML code snippet

Main content...
<div class="block block__border-left">
    Content block with left border.
</div>

Border modifier

Adds border on all sides to .block.

Main content...
Content block with borders on all sides.

HTML code snippet

Main content...
<div class="block block__border">
    Content block with borders on all sides.
</div>

Flush-top modifier

Removes the top margin from .block.

Main content...
Content block with no top margin.
Content block

HTML code snippet

Main content...
<div class="block block__flush-top">
    Content block with no top margin.
</div>
<div class="block">
    Content block
</div>

Flush-bottom modifier

Removes the bottom margin from .block.

Main content...
Content block with no bottom margin.
Content block

HTML code snippet

Main content...
<div class="block block__flush-bottom">
    Content block with no bottom margin.
</div>
<div class="block">
    Content block
</div>

Flush-sides modifier

Removes the side margin from .block. Typically used in conjunction with .block__bg to create a ‘well’ whose background extends into the left and right gutters. (See below.)

Main content...

HTML code snippet

<main class="content content__1-3" role="main">
    <div class="content_wrapper">
        <aside class="content_sidebar">
            Section navigation
        </aside>
        <section class="content_main">
            Main content...
            <aside class="block block__flush-sides">
                Content block with no side margins.
            </aside>
        </section>
    </div>
</main>

Flush modifier

Removes the side, top, and bottom margin from .block.

Main content...

HTML code snippet

<main class="content content__1-3" role="main">
    <div class="content_wrapper">
        <aside class="content_sidebar">
            Section navigation
        </aside>
        <section class="content_main">
            Main content...
            <aside class="block block__flush">
                Content block with no margins.
            </aside>
        </section>
    </div>
</main>

Background modifier

Adds a background color and padding to .block. Setup for (ems-equivalent) 30px padding on top and 60px on bottom.

Main content...
Content block with a background

HTML code snippet

Main content...
<div class="block block__bg">
    Content block with a background
</div>

Background and flush-sides modifier

This is an example of combining modifiers to get a flush padding and background with a .block.

Main content...
Content block with a background and flush sides

HTML code snippet

<main class="content content__1-3" role="main">
    <div class="content_wrapper">
        <aside class="content_sidebar">
            Section navigation
        </aside>
        <section class="content_main content__flush-bottom">
            Main content...
            <div class="block block__flush-sides block__bg">
                Content block with a background and flush sides
            </div>
        </section>
    </div>
</main>

Padded-top modifier

Breaks top margin into margin and padding. Useful in combination with block__border-top to add padding between .block contents and border.

Main content...
Content block with reduced top margin and added top padding and border.

HTML code snippet

Main content...
<div class="block block__padded-top block__border-top">
    Content block with reduced top margin and added top padding
    and border.
</div>

Padded-bottom modifier

Breaks bottom margin into margin and padding. Useful in combination with block__border-bottom to add padding between .block contents and border.

Main content...
Content block with reduced bottom margin and added bottom padding and border.

HTML code snippet

Main content...
<div class="block block__padded-bottom block__border-bottom">
    Content block with reduced bottom margin and added bottom padding
    and border.
</div>

Sub blocks

Useful for when you need some consistent margin between .blocks that are nested within other .blocks.

Note that the divs with inline styles are for demonstration purposes only and should not be used in production.

Sub content block
Sub content block
Sub content block

HTML code snippet

<div class="block block__sub">
    <div style="background: #F1F2F2; padding: 8px;">
        Sub content block
    </div>
</div>
<div class="block block__sub">
    <div style="background: #F1F2F2; padding: 8px;">
        Sub content block
    </div>
</div>
<div class="block block__sub">
    <div style="background: #F1F2F2; padding: 8px;">
        Sub content block
    </div>
</div>

Mixing content blocks with content layouts

You can safely combine .block with .content-l_col to achieve a column-based layout at larger screens with no top margin and a vertical layout at smaller screens that do have margins.

Note that the divs with inline styles are for demonstration purposes only and should not be used in production.

Content block that is also a content column. Notice how my top margins only exist on smaller screens when I need to stack vertically.
Content block that is also a content column. Notice how my top margins only exist on smaller screens when I need to stack vertically.

HTML code snippet

<div class="content-l">
    <div class="block content-l_col content-l_col-1-2">
        <div style="background: #F1F2F2; padding: 8px;">
            Content block that is also a content column.
            Notice how my top margins only exist on smaller screens when
            I need to stack vertically.
        </div>
    </div>
    <div class="block content-l_col content-l_col-1-2">
        <div style="background: #F1F2F2; padding: 8px;">
            Content block that is also a content column.
            Notice how my top margins only exist on smaller screens when
            I need to stack vertically.
        </div>
    </div>
</div>