Primary Theme Info

The Primary Theme Info block is provided for inserting information and examples from the main site theme. Here, the main site theme is Atomik, so the examples below show information about the Atomik theme.

Each template for the Primary Theme Info block shows specific information about the site theme. These templates will work cleanly for most Bootstrap/Atomik/Elemental derived themes. For highly modified themes and for other theme frameworks, some modification may be necessary. Details are provided as comments in the templates.

Container Check

The Container Check block template integrates with the Container Check addon to provide container information within a Frontend Dashboard page. In addition to the containers provided by Atomik,  we also show containers provided by Container Magic.

Container Icon
Highlight Stripe [Container Magic: light_stripe] (Optional areas may collapse)
(Optional) Title
Body
<div class="cm-stripe cm-light-stripe cm-magic padding-top-40 padding-bottom-40 one-column stripe bg-light">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="container-light-stripe-title col-md-12 column-12 stripe-title">
               (Optional) Title
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-light-stripe-body col-md-12 column-12">
               Body
           </div>
       </div>
   </div>
</div>
full.png
Left Sidebar 3 [Container Magic: left_sidebar_3] (Optional areas may collapse)
(Optional) Body Full Above
Sidebar
Body
(Optional) Body Full Below
<div class="cm-left-sidebar cm-left-sidebar-3 cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-sidebar col-md-3 column-3">
               Sidebar
           </div>
           <div class="cm-body col-md-9 column-9">
               Body
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
left_sidebar.png
Left Sidebar 3 with gutter [Container Magic: left_sidebar_3_gap] (Optional areas may collapse)
(Optional) Body Full Above
Sidebar
Body
(Optional) Body Full Below
<div class="cm-left-sidebar cm-left-sidebar-3-gap cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-sidebar col-md-3 column-3">
               Sidebar
           </div>
           <div class="col-md-1 column-1 cm-gutter">
           </div>
           <div class="cm-body col-md-8 column-8">
               Body
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
left_sidebar.png
Left Sidebar 4 [Container Magic: left_sidebar_4] (Optional areas may collapse)
(Optional) Body Full Above
Sidebar
Body
(Optional) Body Full Below
<div class="cm-left-sidebar cm-left-sidebar-4 cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-sidebar col-md-4 column-4">
               Sidebar
           </div>
           <div class="cm-body col-md-8 column-8">
               Body
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
left_sidebar.png
Left Sidebar 4 with gutter [Container Magic: left_sidebar_4_gap] (Optional areas may collapse)
(Optional) Body Full Above
Sidebar
Body
(Optional) Body Full Below
<div class="cm-left-sidebar cm-left-sidebar-4-gap cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-sidebar col-md-4 column-4">
               Sidebar
           </div>
           <div class="col-md-1 column-1 cm-gutter">
           </div>
           <div class="cm-body col-md-7 column-7">
               Body
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
left_sidebar.png
Left Sidebar 5 [Container Magic: left_sidebar_5] (Optional areas may collapse)
(Optional) Body Full Above
Sidebar
Body
(Optional) Body Full Below
<div class="cm-left-sidebar cm-left-sidebar-5 cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-sidebar col-md-5 column-5">
               Sidebar
           </div>
           <div class="cm-body col-md-7 column-7">
               Body
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
left_sidebar.png
Responsive Grid of Four [Container Magic: grid_four] (Optional areas may collapse)
(Optional) Body Full Above
Item 1
Item 2
Item 3
Item 4
(Optional) Body Full Below
<div class="cm-grid-four cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-grid-four-1 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-12 column-3">
               Item 1
           </div>
           <div class="cm-grid-four-2 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-12 column-3">
               Item 2
           </div>
           <div class="cm-grid-four-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-12 column-3">
               Item 3
           </div>
           <div class="cm-grid-four-4 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-12 column-3">
               Item 4
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
grid.png
Responsive Grid of Four by Two [Container Magic: grid_four_two] (Optional areas may collapse)
(Optional) Body Full Above
Item 1
Item 2
Item 3
Item 4
(Optional) Body Full Below
<div class="cm-grid-four-by-two cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="m-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-grid-four-by-two-1 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 column-6">
               Item 1
           </div>
           <div class="cm-grid-four-by-two-2 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 column-6">
               Item 2
           </div>
           <div class="cm-grid-four-by-two-3 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 column-6">
               Item 3
           </div>
           <div class="cm-grid-four-by-two-4 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 column-6">
               Item 4
           </div>
       </div>
       <div class="row grid-row">
           <div class="m-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
grid.png
Responsive Grid of Six [Container Magic: grid_six] (Optional areas may collapse)
(Optional) Body Full Above
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
(Optional) Body Full Below
<div class="cm-grid-six cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-grid-six-1 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 1
           </div>
           <div class="cm-grid-six-2 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 2
           </div>
           <div class="cm-grid-six-3 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 3
           </div>
           <div class="cm-grid-six-4 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 4
           </div>
           <div class="cm-grid-six-5 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 5
           </div>
           <div class="cm-grid-six-6 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 6
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
grid.png
Responsive Grid of Twelve by Four [Container Magic: grid_twelve_four] (Optional areas may collapse)
(Optional) Body Full Above
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
(Optional) Body Full Below
<div class="cm-grid-twelve-by-four cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-grid-twelve-by-four-1 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 1
           </div>
           <div class="cm-grid-twelve-by-four-2 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 2
           </div>
           <div class="cm-grid-twelve-by-four-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 3
           </div>
           <div class="cm-grid-twelve-by-four-4 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 4
           </div>
           <div class="cm-grid-twelve-by-four-5 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 5
           </div>
           <div class="cm-grid-twelve-by-four-6 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 6
           </div>
           <div class="cm-grid-twelve-by-four-7 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 7
           </div>
           <div class="cm-grid-twelve-by-four-8 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 8
           </div>
           <div class="cm-grid-twelve-by-four-9 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 9
           </div>
           <div class="cm-grid-twelve-by-four-10 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 10
           </div>
           <div class="cm-grid-twelve-by-four-11 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 11
           </div>
           <div class="cm-grid-twelve-by-four-12 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 12
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
grid.png
Responsive Grid of Twelve by Three [Container Magic: grid_twelve_three] (Optional areas may collapse)
(Optional) Body Full Above
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
(Optional) Body Full Below
<div class="cm-grid-twelve-by-three cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-grid-twelve-by-three-1 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 1
           </div>
           <div class="cm-grid-twelve-by-three-2 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 2
           </div>
           <div class="cm-grid-twelve-by-three-3 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 3
           </div>
           <div class="cm-grid-twelve-by-three-4 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 4
           </div>
           <div class="cm-grid-twelve-by-three-5 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 5
           </div>
           <div class="cm-grid-twelve-by-three-6 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 6
           </div>
           <div class="cm-grid-twelve-by-three-7 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 7
           </div>
           <div class="cm-grid-twelve-by-three-8 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 8
           </div>
           <div class="cm-grid-twelve-by-three-9 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 9
           </div>
           <div class="cm-grid-twelve-by-three-10 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 10
           </div>
           <div class="cm-grid-twelve-by-three-11 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 11
           </div>
           <div class="cm-grid-twelve-by-three-12 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 12
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
grid.png
Right Sidebar 3 [Container Magic: right_sidebar_3] (Optional areas may collapse)
(Optional) Body Full Above
Body
Sidebar
(Optional) Body Full Below
<div class="cm-right-sidebar cm-right-sidebar-3 cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-body col-md-9 column-9">
               Body
           </div>
           <div class="cm-sidebar col-md-3 column-3">
               Sidebar
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
right_sidebar.png
Right Sidebar 3 with gutter [Container Magic: right_sidebar_3_gap] (Optional areas may collapse)
(Optional) Body Full Above
Body
Sidebar
(Optional) Body Full Below
<div class="cm-right-sidebar cm-right-sidebar-3-gap cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-body col-md-8 column-8">
               Body
           </div>
           <div class="col-md-1 column-1 cm-gutter">
           </div>
           <div class="cm-sidebar col-md-3 column-3">
               Sidebar
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
right_sidebar.png
Right Sidebar 4 [Container Magic: right_sidebar_4] (Optional areas may collapse)
(Optional) Body Full Above
Body
Sidebar
(Optional) Body Full Below
<div class="cm-right-sidebar cm-right-sidebar-4 cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-body col-md-8 column-8">
               Body
           </div>
           <div class="cm-sidebar col-md-4 column-4">
               Sidebar
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
right_sidebar.png
Right Sidebar 4 with gutter [Container Magic: right_sidebar_4_gap] (Optional areas may collapse)
(Optional) Body Full Above
Body
Sidebar
(Optional) Body Full Below
<div class="cm-right-sidebar cm-right-sidebar-4-gap cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-body col-md-7 column-7">
               Body
           </div>
           <div class="col-md-1 column-1 cm-gutter">
           </div>
           <div class="cm-sidebar col-md-4 column-4">
               Sidebar
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
right_sidebar.png
Right Sidebar 5 [Container Magic: right_sidebar_5] (Optional areas may collapse)
(Optional) Body Full Above
Body
Sidebar
(Optional) Body Full Below
<div class="cm-right-sidebar cm-right-sidebar-5 cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-body col-md-7 column-7">
               Body
           </div>
           <div class="cm-sidebar col-md-5 column-5">
               Sidebar
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
right_sidebar.png
Single Column [Container Magic: single_column] (Optional areas may collapse)
(Optional) Body Full Above
Column
(Optional) Body Full Below
<div class="cm-single-col cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-single-col-column col-md-12 column-12">
               Column
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
full.png
Single Column Condensed [Container Magic: single_column_condensed] (Optional areas may collapse)
(Optional) Body Full Above
Column
(Optional) Body Full Below
<div class="cm-single-col-condensed cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="col-md-1 column-1 cm-left-margin">
           </div>
           <div class="cm-full-body-below cc-optional col-md-10 column-10">
               (Optional) Body Full Above
           </div>
           <div class="col-md-1 column-1 cm-right-margin">
           </div>
       </div>
       <div class="row grid-row">
           <div class="col-md-1 column-1 cm-left-margin">
           </div>
           <div class="cm-single-col-condensed-column col-md-10 column-10">
               Column
           </div>
           <div class="col-md-1 column-1 cm-right-margin">
           </div>
       </div>
       <div class="row grid-row">
           <div class="col-md-1 column-1 cm-left-margin">
           </div>
           <div class="cm-full-body-below cc-optional col-md-10 column-10">
               (Optional) Body Full Below
           </div>
           <div class="col-md-1 column-1 cm-right-margin">
           </div>
       </div>
   </div>
</div>
full.png
Single Column Condensed More [Container Magic: single_column_condensed_more] (Optional areas may collapse)
(Optional) Body Full Above
Column
(Optional) Body Full Below
<div class="cm-single-col-condensed-more cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="col-md-2 column-2 cm-left-margin">
           </div>
           <div class="cm-full-body-below cc-optional col-md-8 column-8">
               (Optional) Body Full Above
           </div>
           <div class="col-md-2 column-2 cm-right-margin">
           </div>
       </div>
       <div class="row grid-row">
           <div class="col-md-2 column-2 cm-left-margin">
           </div>
           <div class="cm-single-col-condensed-more-column col-md-8 column-8">
               Column
           </div>
           <div class="col-md-2 column-2 cm-right-margin">
           </div>
       </div>
       <div class="row grid-row">
           <div class="col-md-2 column-2 cm-left-margin">
           </div>
           <div class="cm-full-body-below cc-optional col-md-8 column-8">
               (Optional) Body Full Below
           </div>
           <div class="col-md-2 column-2 cm-right-margin">
           </div>
       </div>
   </div>
</div>
full.png
Three Column [Container Magic: three_column] (Optional areas may collapse)
(Optional) Body Full Above
Column 1
Column 2
Column 3
(Optional) Body Full Below
<div class="cm-three-column cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-three-col-1 col-md-4 column-4">
               Column 1
           </div>
           <div class="cm-three-col-2 col-md-4 column-4">
               Column 2
           </div>
           <div class="cm-three-col-3 col-md-4 column-4">
               Column 3
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
three_column.png
Two Column [Container Magic: two_column] (Optional areas may collapse)
(Optional) Body Full Above
Column 1
Column 2
(Optional) Body Full Below
<div class="cm-two-column cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-two-col-1 col-md-6 column-6">
               Column 1
           </div>
           <div class="cm-two-col-2 col-md-6 column-6">
               Column 2
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
two_column.png
Two Column and Sidebar [Container Magic: two_column_plus_sidebar] (Optional areas may collapse)
(Optional) Body Full Above
Column 1
Column 2
Sidebar
(Optional) Body Full Below
<div class="cm-two-col-plus-sidebar cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-two-col-plus-sidebar-1 col-md-4 column-4">
               Column 1
           </div>
           <div class="cm-two-col-plus-sidebar-2 col-md-4 column-4">
               Column 2
           </div>
           <div class="col-md-1 column-1 cm-gutter">
           </div>
           <div class="cm-two-col-plus-sidebar-sidebar cm-sidebar col-md-3 column-3">
               Sidebar
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
three_column.png
Two Column Condensed [Container Magic: two_column_condensed] (Optional areas may collapse)
(Optional) Body Full Above
Column 1
Column 2
(Optional) Body Full Below
<div class="cm-two-col-condensed cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="col-md-1 column-1 cm-left-margin">
           </div>
           <div class="cm-full-body-below cc-optional col-md-10 column-10">
               (Optional) Body Full Above
           </div>
           <div class="col-md-1 column-1 cm-right-margin">
           </div>
       </div>
       <div class="row grid-row">
           <div class="col-md-1 column-1 cm-left-margin">
           </div>
           <div class="cm-two-col-condensed-1 col-md-5 column-5">
               Column 1
           </div>
           <div class="cm-two-col-condensed-2 col-md-5 column-5">
               Column 2
           </div>
           <div class="col-md-1 column-1 cm-right-margin">
           </div>
       </div>
       <div class="row grid-row">
           <div class="col-md-1 column-1 cm-left-margin">
           </div>
           <div class="cm-full-body-below cc-optional col-md-10 column-10">
               (Optional) Body Full Below
           </div>
           <div class="col-md-1 column-1 cm-right-margin">
           </div>
       </div>
   </div>
</div>
two_column.png
Two Column Highlight [Container Magic: two_column_light] (Optional areas may collapse)
(Optional) Body Full Above
Column 1
Column 2
(Optional) Body Full Below
<div class="cm-stripe cm-two-col-light cm-magic stripe bg-light">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-two-col-light-1 col-md-6 column-6">
               Column 1
           </div>
           <div class="cm-two-col-light-2 col-md-6 column-6">
               Column 2
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
two_column.png

Atomik [atomik] - basic typography

Atomik [atomik] - styles for rich text editor

Last Updated: a month ago