Panels utilize flexbox to create a vertical container whose direct children are:

• -header, -footer, or -navBar children that will fill out space based on their children elements.
• -content, which will grow into the remainder of the vertical space and rendering a scrollbar if inner content overflows.

Using Panels inside of component style definition

You can get all panel block and element classes for your component through the l-panel mixin just before any panel declaration:

    @include l-panel('c-mySpecificPanel');
    .c-mySpecificPanel {
        // specific panel classes.
    }

Default

Using the l-panel classes directly..

HTML

<div class="t-content">
    <div class="l-panel" style="height: 600px;">
        <div class="l-panel-header">
            <div class="l-panel-title">Some Title Here!!!</div>
        </div>
        <div class="l-panel-navBar"></div>
        <div class="l-panel-content">
            <div style="height: 600px">
                <p>Some fake content.</p>
            </div>
        </div>
        <div class="l-panel-footer">
            <div class="l-panel-actions">
                <div class="c-button c-button--primary">Action</div>
                <div class="c-button c-button--link">Secondary Action</div>
            </div>
        </div>
    </div>
</div>