| Vapor CSS

Panel

Panel header styling

Style sheet: /scss/components/panel-header.scss

Panel Header

Panel description

<div class="panel-header flex flex-center">
    <div>
        <h1 class="inline bold text-medium-blue">Panel Header</h1>
        <h4 class="admin-description text-dark-grey">Panel description</h4>
    </div>
    <div class="flex-auto"></div>
    <div class="js-action-bar action-bar">
        <div class="actions-row">
            <a class="action mod-link" href="#" title="Edit">
                <span class="icon mod-lg"><svg viewbox="0 0 20 20"><path d="M1 4c0-.553.446-1 .997-1h8v2h-7s.019 11.933 0 12h12v-7h2v8a.997.997 0 0 1-1 .997H1.999c-.553 0-1-.445-1-1V4"/><path d="M14.5 3.5l-7 7L6 14l3.5-1.5 7-7zM17.848.848a.495.495 0 0 0-.697 0L15.499 2.5l2 2 1.652-1.652a.495.495 0 0 0 0-.697L17.848.848"/></svg></span>
            </a>
            <div class="action"
                 data-trigger="trigger-action"
                 data-requires-confirmation=""
                 data-icon="export"
                 data-unrepeatable="">

                <div class="trigger" title="Export">
                    <span class="icon mod-lg"><svg viewbox="0 0 20 20"><path d="M11 14V3.7l1.5 1.5c.7.7 1.5 0 1.5 0s.7-.8 0-1.5L10.7.3c-.4-.4-1-.4-1.4 0L6 3.8c-.7.7 0 1.4 0 1.4s.8.7 1.5 0L9 3.7V14c0 .6.5 1 1 1s1-.4 1-1"/><path d="M14 10v2h4v6H2v-6h4v-2H1s-1 0-1 1v8c0 1 1 1 1 1h18c1 0 1-1 1-1v-8c0-1-1-1-1-1h-5z"/></svg></span>
                </div>
            </div>

            <div class="dropdown action" title="More">
                <span class="dropdown-toggle" id="options" data-toggle="dropdown">
                    <span class="icon mod-lg" title=""><svg viewbox="0 0 18 18"><path d="M9 18c-5 0-9-4-9-9s4-9 9-9 9 4 9 9-4 9-9 9zM9 2C5.1 2 2 5.1 2 9s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z"/><path d="M12.6 9.9c.5 0 .9-.4.9-.9s-.4-.9-.9-.9-.9.4-.9.9.4.9.9.9M9 9.9c.5 0 .9-.4.9-.9s-.4-.9-.9-.9-.9.4-.9.9.4.9.9.9m-3.6 0c.5 0 .9-.4.9-.9s-.4-.9-.9-.9-.9.4-.9.9.4.9.9.9"/></svg></span>
                </span>
                <ul class="dropdown-menu mod-right">
                    <li><span class="enabled" data-trigger="secondary-action-1">Secondary Action 1</span></li>
                    <li><span class="state-disabled" data-trigger="secondary-action-2">Secondary Action 2</span></li>
                    <li><span class="enabled" data-trigger="secondary-action-3">Secondary Action 3</span></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    $('.js-action-bar .dropdown').off('click').click(function(e) {
        $(this).toggleClass('open');
    });
</script>

Site

Use as your web application header. Note that the 9px gap at the bottom of the header is normal and should be hidden by the application container.

Style sheet: /scss/components/header.scss

[LOGO]
Section 1, mod-padded
Section 2
<div class="header flex">
    <div class="header-section mod-padded flex flex-center">
        [LOGO]
    </div>
    <div class="flex-auto"></div>
    <div class="header-section mod-padded flex flex-center">
        Section 1, mod-padded
    </div>
    <div class="header-section">
        Section 2
    </div>
</div>