Code cookbook

• Loader
• Images
• Graphics
• Fact boxes
• Pull quotes
• Videos
• About section
• Correction
• Nav

---

Loader

<!-- loader -->
<div class="hc-loader-wrapper hc-primary-background">
    <div class="hc-loader">
        <div class="hc-loader-logo"></div>
        <div class="hc-spinner">
            <div class="hc-bounce1"></div>
            <div class="hc-bounce2"></div>
            <div class="hc-bounce3"></div>
        </div>
    </div>
</div>
<!-- /end loader -->

---

Images

• Story-width

<figure class="story-img">
    <img src="http://www.mcclatchydc.com/news/v2zydn/picture116721638/binary/placeholder1.png"/>
    <figcaption>Caption information goes here. (Photographer Name, Publication)</figcaption>
</figure>

• Container-width

<figure class="container-img">
    <img src="http://www.mcclatchydc.com/news/v2zydn/picture116721638/binary/placeholder1.png"/>
    <figcaption>Caption information goes here. (Photographer Name, Publication)</figcaption>
</figure>

• Full-width

<figure class="fluid-img">
    <img src="http://www.mcclatchydc.com/news/v2zydn/picture116721638/binary/placeholder1.png"/>
    <figcaption>Caption information goes here. (Photographer Name, Publication)</figcaption>
</figure>

---

Facebook comments

Facebook comments only load in published story pages on the server (not local files).

<div class="comments">
    <h1 id="comments-heading" class="heading">Comments</h1>
    <div class="fb-comments" data-href="http://LINK TO YOUR STORY PAGE GOES HERE.html" data-numposts="10" data-width="100%" data-colorscheme="light"></div>
</div>

---

Correction note

<!-- correction note -->
<div class="hc-note-wrapper">
    <p class="hc-note"><strong>Correction:</strong> Opps, we made a mistake and here's what it is. Needs to give enough context to not confuse the reader since they're just beginning the story.</p>
</div>
<!-- /end correction note -->

---

Note

<!-- note -->
<div class="hc-note-wrapper">
    <p class="hc-note">This is a note. Short loin excepteur venison t-bone salami. Burgdoggen minim enim eiusmod mollit. Adipisicing ex ham cow beef ribs tail porchetta et turkey shank. Picanha rump laborum cupim minim sed beef turkey prosciutto dolor tongue commodo.</p>

    <p class="hc-note">Boudinsed minim ut, rump pork loin bacon ball tip et tail nostrud. Pig doner chuck culpa incididunt. Boudin duis aliquip, non irure dolore mollit kevin leberkas rump culpa ribeye pancetta fatback.</p>
</div>
<!-- /end note -->

---

Nav

<!-- nav -->
<nav id="hc-nav-header" class="hc-primary-background">

    <!-- nav wrapper -->
    <div class="hc-nav-wrapper">
        <div id="hc-nav-head">Name of project goes here</div>

        <!-- desktop nav list -->
        <ul id="hc-nav-desk">
            <li>
                <a class="hc-nav-active" href="FILL THIS IN">Part one head</a>
            </li>
            <li>
                <a href="FILL THIS IN">Part two head</a>
            </li>
            <li>
                <a href="FILL THIS IN">Part three head</a>
            </li>
            <li>
                <a href="FILL THIS IN">Part four head</a>
            </li>
        </ul>
        <!-- /end desktop nav list -->

        <div id="hc-hamburger">&#9776;</div>

        <!-- mobile nav list -->
        <div id="hc-nav-mob" class="hc-primary-background">
            <div id="hc-nav-close">✕</div>
            <ul>
                <li>
                    <a class="hc-nav-active" href="FILL THIS IN">Part one head</a>
                </li>
                <li>
                    <a href="FILL THIS IN">Part two head</a>
                </li>
                <li>
                    <a href="FILL THIS IN">Part three head</a>
                </li>
                <li>
                    <a href="FILL THIS IN">Part four head</a>
                </li>
            </ul>
        </div>
        <!-- /end mobile nav list -->

        <div class="hc-shadow"></div>
    </div>
    <!-- /end nav wrapper -->

</nav>
<!-- /end nav -->