Note Box For Docs

index.html

<div class="note"> Gastropub semiotics Wes Anderson McSweeney's DIY next level. Narwhal biodiesel DIY mumblecore flannel, gluten-free pork belly trust fund farm-to-table High Life keffiyeh semiotics. 8-bit artisan vegan, Carles flexitarian yr food truck Helvetica skateboard ugh taxidermy pop-up. +1 leggings Neutra bicycle rights readymade. Freegan four dollar toast lomo ennui YOLO occupy. Butcher raw denim keytar pork belly. Seitan gentrify shabby chic try-hard, cray ugh Blue Bottle pop-up yr Marfa put a bird on it Vice paleo pug Brooklyn.</div>
<div class="caution">Pork belly roof party sint vegan Portland Bushwick, disrupt pug umami tilde bicycle rights Neutra duis raw denim. Farm-to-table bitters pickled, deep v church-key asymmetrical bicycle rights Etsy. Yr heirloom American Apparel try-hard. Next level sustainable roof party deep v Pinterest placeat. Photo booth craft beer est, literally gluten-free enim bitters brunch cliche placeat XOXO aliquip aesthetic. Thundercats deep v crucifix forage, church-key non farm-to-table kogi leggings gastropub cupidatat. Exercitation laboris fixie Odd Future commodo taxidermy ex.</div>

Note Box For Docs.markdown

Note Box For Docs

Are you super sick of having to write the same CSS for note and caution boxes? Simply copy and paste this CSS action into your stylesheet, add your own notebg and cautionbg, remove the comments, and Bob is your uncle.

Implement it as a div as

or

Super neat!

A Pen by Matthew Buttler on CodePen.

License.

style.css

/* NOTE BOXES FOR DOCS
/* Distributed under GPU License


/* Plot out the header and background */
div.note:before, div.caution:before {
    display:inline-block;
    background: #fff no-repeat;
    font-weight: bold;
    position: absolute;
   /* Depending on how your existing theme looks
      you may need to play with the margins and           padding a bit */
    top: -15px;
    margin-left: 20px;
    padding:5px 5px;
    padding-left:30px; 

}
/* Plot out the real estate for body */
div.note, div.caution {
    border-radius: 10px;
    padding: 20px 20px 10px;
    margin: 25px auto 30px;
    position:relative;
    display:inline-block;
    width:auto;
    max-width: 1000px;

}

/* Make a Note Box With a background image for an icon and text */
div.note:before {
    background-image: url(//p5.zdassets.com/hc/theme_assets/4826/200045987/note.png);
    background-size:27%;
    color:#black;
    content:'Note';
    background-position:  5px;
}
/* Pop it with a border with a neat colour */
div.note {
    border: 1px solid #286090;
}

/* Make a Caution Box With a background image for an icon and text */
div.caution:before {
   background-image: url(//p5.zdassets.com/hc/theme_assets/4826/200045987/caution.png);
    background-size:20%;
    color:#black;
    content:'Caution';
    background-position: 5px;
}

/* Pop it with a border, with a neat colour*/
div.caution {
    border: 1px solid #a74301;
}