TryGhost/Ghost

<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>
            Components
        </h2>
    </GhCanvasHeader>

    <section class="view-container gh-ds">
        <h2>Post bookmark</h2>
        <GhPostBookmark @post={{this.model}} />

        <h2 class="">Buttons</h2>
        <ul class="nostyle">
            <li><button class="gh-btn gh-btn-primary" type="button"><span>Primary button</span></button></li>
            <li><button class="gh-btn" type="button"><span>Regular button</span></button></li>
            <li><button class="gh-btn gh-btn-blue" type="button"><span>Blue button</span></button></li>
            <li><button class="gh-btn gh-btn-green" type="button"><span>Green button</span></button></li>
            <li><button class="gh-btn gh-btn-red" type="button"><span>Red button</span></button></li>
            <li><button class="gh-btn gh-btn-outline" type="button"><span>Outline button</span></button></li>
            <li><button class="gh-btn gh-btn-primary gh-btn-large" type="button"><span>Large button</span></button></li>
        </ul>

        <h2 class="">Lists</h2>

        <div class="gh-list">
            <div class="gh-list-row header">
                <div class="gh-list-header">Column 1</div>
                <div class="gh-list-header">Column 2</div>
                <div class="gh-list-header">Column 3</div>
            </div>
            <div class="gh-list-row">
                <div class="gh-list-data">
                    <h3>Data</h3>
                </div>
                <div class="gh-list-data">
                    <span>Data</span>
                </div>
                <div class="gh-list-data">
                    <span>Data</span>
                </div>
            </div>
            <div class="gh-list-row">
                <div class="gh-list-data">
                    <h3>Data</h3>
                </div>
                <div class="gh-list-data">
                    <span>Data</span>
                </div>
                <div class="gh-list-data">
                    <span>Data</span>
                </div>
            </div>
            <div class="gh-list-row">
                <div class="gh-list-data">
                    <h3>Data</h3>
                </div>
                <div class="gh-list-data">
                    <span>Data</span>
                </div>
                <div class="gh-list-data">
                    <span>Data</span>
                </div>
            </div>
        </div>

        <h2 class="mt8">Sections</h2>

        <section class="gh-main-section">
        <h4 class="gh-main-section-header small bn">Single column</h4>
        <div class="gh-main-section-block">
            <div class="gh-main-section-content">
                <div>Column 1</div>
            </div>
        </div>
        </section>

        <section class="gh-main-section">
        <h4 class="gh-main-section-header small bn">Section heading</h4>
        <div class="gh-main-section-block">
            <div class="gh-main-section-content columns-2">
                <div>Column 1</div>
                <div>Column 2</div>
            </div>
        </div>
        </section>

        <section class="gh-main-section columns-2">
        <div class="gh-main-section-block">
            <h4 class="gh-main-section-header small bn">Block 1</h4>
            <div class="gh-main-section-content grey">Contents</div>
        </div>
        <div class="gh-main-section-block">
            <h4 class="gh-main-section-header small bn">Block 2</h4>
            <div class="gh-main-section-content grey">Contents</div>
        </div>
        </section>

        <h2 class="mt8">Setting area</h2>

        <div class="gh-main-section">
            <h4 class="gh-main-section-header small bn">Section heading</h4>
            <div class="gh-expandable">
                <div class="gh-expandable-block">
                    <div class="gh-expandable-header">
                        <div>
                            <h4 class="gh-expandable-title">Title</h4>
                            <p class="gh-expandable-description">Description</p>
                        </div>
                        <div>[ACTION]</div>
                    </div>
                    <div>[CONTENT - OPTIONAL / HIDDEN FOR EXPANDABLE]</div>
                </div>

                <div class="gh-expandable-block">
                    <div class="gh-expandable-header">
                        <div>
                            <h4 class="gh-expandable-title">Title</h4>
                            <p class="gh-expandable-description">Description</p>
                        </div>
                        <div>[ACTION]</div>
                    </div>
                </div>

                <div class="gh-expandable-block">
                    <div class="gh-expandable-header">
                        <div>
                            <h4 class="gh-expandable-title">Title</h4>
                            <p class="gh-expandable-description">Description</p>
                        </div>
                        <div>[ACTION]</div>
                    </div>
                </div>
            </div>
        </div>

    </section>
</section>