Skip to main content
You’ve been redirected to this website from .

The website you were trying to visit has been deprecated. Future updates will happen here.

A permanent snapshot of is available at .

Layout

Blocks

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

Types

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>

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="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="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 combo example

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

Content dividers

A 1 pixel edge to edge bar that can divide content.

HTML code snippet

<div class="content__line"></div>

Latest Updates

Page last edited:
Show all details
Edit page