{{#extend "layout" title="Light Blue HTML5 Dashboard - UI Jumbotron"}}
    {{#content "sidebar"}}
    {{> sidebar active="ui_jumbotron"}}
    {{/content}}
    {{#content "content" mode="replace"}}
        <ol class="breadcrumb">
            <li class="breadcrumb-item">YOU ARE HERE</li>
            <li class="breadcrumb-item active">UI Jumbotron</li>
        </ol>
        <div class="row">
            <div class="col-12">
                <div class="jumbotron jumbotron-fluid mb-xlg rounded">
                    <h1 class="display-3">Fluid jumbotron</h1>
                    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
                </div>
            </div>
            <div class="col-md-8">
                <div class="jumbotron rounded">
                    <h1 class="display-3">Hello, world!</h1>
                    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                    <hr class="my-4">
                    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
                    <p class="lead">
                        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
                    </p>
                </div>
            </div>
        </div>
    {{/content}}
{{/extend}}