Code Blender

An atomic Middleman partials library

Panel

  2. Molecule
  3. Panel

Default

Body 
= codeBlender "panel", "molecule", { body: "Body" }

<div class='panel panel-default'>
<div class='panel-body'>
Body
</div>
</div>

Full Panel Contains the Tools also

Heading

Body
Footer
= codeBlender "panel", "molecule", { body:    "Body",
                            context: "primary",
                            footer:  "Footer",
                            heading: { text: "Heading", tag: "h3" },
                            tools:   true }

<div class='panel panel-primary'>
<div class='panel-heading'>
<div class='tools'>
<a href="javascript:;" class="toggle"><span class='fa fa-caret-down'></span>


</a></div>
<h3 class='heading panel-title'>
Heading
</h3>


</div>
<div class='panel-body'>
Body
</div>
<div class='panel-footer'>Footer</div>
</div>

Panel with Image Heading

Image
Body
Footer
= codeBlender "panel", "molecule", { body:    "Body",
                            context: "primary",
                            footer:  "Footer",
                            heading: { extraClass: "text-center", image: { data: holder( "300x40" ) } },
                            tools:   true }

<div class='panel panel-primary'>
<div class='panel-heading text-center'>
<div class='tools'>
<a href="javascript:;" class="toggle"><span class='fa fa-caret-down'></span>


</a></div>
<figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img alt='Image' class='image__img' data='holder.js/200x200/auto/300x40/social/' itemprop='contentUrl'>
</figure>

</div>
<div class='panel-body'>
Body
</div>
<div class='panel-footer'>Footer</div>
</div>

Panel with HTML Body

Heading

["

Choose Provider

\n\n\n"]
Footer
= codeBlender "panel", "molecule", { body:    [ @captureHTML ],
                            context: "primary",
                            footer:  "Footer",
                            heading: { text: "Heading", tag: "h3" },
                            tools:   true }

<div class='panel panel-primary'>
<div class='panel-heading'>
<div class='tools'>
<a href="javascript:;" class="toggle"><span class='fa fa-caret-down'></span>


</a></div>
<h3 class='heading panel-title'>
Heading
</h3>


</div>
<div class='panel-body'>
["<p>Choose Provider</p>\n<button class='btn btn-default btn-primary' type='button'>\nPrimary\n\n</button>\n\n"]
</div>
<div class='panel-footer'>Footer</div>
</div>

Resources Useful websites and tutorials

Title URL
Bootstrap Panel http://getbootstrap.com/components/#panels

Tasks

Task Date
Bootstrap 4 removes the panel for card
Header bar should have a collapsible element to the left hand side
Look at integration with tables and lists
BEM the HTML and CSS
Use icon partial in here
Probably can remove the table element for extraContent or simply pull in another partial that should be created