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