Components

Tabs

<div class="dh-tabs">

    <input type="radio" name="tabset-1" id="tab-1" class="dh-tab-radio" checked />
    <label class="dh-tab-label" for="tab-1">Tab One</label>
    <section class="dh-tab-content">content 1</section>

    <input type="radio" name="tabset-1" id="tab-2" class="dh-tab-radio" />
    <label class="dh-tab-label" for="tab-2">Tab Two</label>
    <section class="dh-tab-content">content 2 asdsadsad asdsad </section>

    <input type="radio" name="tabset-1" id="tab-3" class="dh-tab-radio" />
    <label class="dh-tab-label" for="tab-3">Tab Three</label>
    <section class="dh-tab-content">content 3 asdsad <br> asdasd</section>

</div>
content 1
content 2 asdsadsad asdsad
content 3 asdsad
asdasd

List

<div class="dh-list">
    <div class="dh-list-item">text item</div>
    <a class="dh-list-item">link item</a>
</div>
text item
link item

Accordion

<div class="dh-accordion">

    <section class="dh-accordion-section">
        <input id="item-1" type="checkbox" name="faq" class="dh-accordion-toggle">
        <label for="item-1" class="dh-accordion-label">Item 1</label>
        <div class="dh-accordion-content">
            content
        </div>
    </section>

    <section class="dh-accordion-section">
        <input id="item-2" type="checkbox" name="faq" class="dh-accordion-toggle">
        <label for="item-2" class="dh-accordion-label">Item 2</label>
        <div class="dh-accordion-content">
            content
        </div>
    </section>

    <section class="dh-accordion-section">
        <input id="item-3" type="checkbox" name="faq" class="dh-accordion-toggle">
        <label for="item-3" class="dh-accordion-label">Item 3</label>
        <div class="dh-accordion-content">
            content
        </div>
    </section>

</div>
content
content
content

Text

<p class="dh-text-good">Good</p>
<p class="dh-text-bad">Bad</p>
<p class="dh-text-neutral">Neutral</p>

Good

Bad

Neutral

Cards

<div class="dh-card">Hello!</div>
<div class="dh-card dh-card-neutral">Hello!</div>
<div class="dh-card dh-card-good">Hello!</div>
<div class="dh-card dh-card-bad">Hello!</div>
Hello!
Hello!
Hello!
Hello!

Grid

<div class="dh-grid">
    <div class="dh-grid-item dh-card dh-p-sm">Hello!</div>
    <div class="dh-grid-item dh-card dh-p-sm">Hello!</div>
    <div class="dh-grid-item dh-card dh-p-sm">Hello!</div>
    <div class="dh-grid-item dh-card dh-p-sm">Hello!</div>
</div>
Hello!
Hello!
Hello!
Hello!

Examples

/* TODO */
Good
h1,
h2,
h3 {
    /* ..  */
}
Bad
h1, h2, h3 {
    /* ..  */
}
Good
h1,
h2,
h3 {
    /* ..  */
}
Bad
h1, h2, h3 {
    /* ..  */
}
Good
h1,
h2,
h3 {
    /* ..  */
}

Spacing

<div class="dh-mt-xs dh-placeholder">xs</div>
<div class="dh-mt-sm dh-placeholder">sm</div>
<div class="dh-mt-md dh-placeholder">md</div>
<div class="dh-mt-lg dh-placeholder">lg</div>
<div class="dh-mt-xl dh-placeholder">xl</div>
xs
sm
md
lg
xl