Dashboard

.dashboard {
    margin-left: calc(-#{$spacer * 1.5} - 5px);
    margin-right: calc(-#{$spacer * 1.5} - 5px);

    .grid-stack-item {

        &.ui-draggable-dragging > .grid-stack-item-content {
            box-shadow: none;
        }
    }

    .grid-stack-item-content {
        display: flex;
        padding: 5px;
        width: 100%;
    }

    .dashboard-widget {
        width: 100%;
    }
}

Varianten

Standard

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Title

<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/10.3.1/gridstack-all.min.js" integrity="sha512-xPj2K1I6wjm4kkLXbz6urloMaVdKi7V1/u2qLgh1vAwSbPS+t7hTOGxBsoRpR8qnfILYnQ4gqr92Jin3cGStgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/10.3.1/gridstack.min.css" integrity="sha512-GEMqAs1Ai2iirp6QhD4N5Qt7tDn1RGgF1CY2xp57LrX3vqTDehSC88IOFewV/L84htjbN7aazcK10FyzH+eXSA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/10.3.1/gridstack-extra.min.css" integrity="sha512-287EQpO1sItRDNvuCUARDlhpQs3qLRCMaidpOKp5BFu6EgcX3XxB92jmTvdXWW57Q9ImHcYqIHKx12EATT3sPA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="dashboard grid-stack">
    <div class="grid-stack-item gs-4" gs-x="0" gs-y="0" gs-w="2" gs-h="1">
        <div class="grid-stack-item-content">
            <div class="dashboard-widget">
    <div class="dashboard-widget__title">
        Title
        <div class="dropdown">
            <button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="ti ti-chevron-down"></i>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
    </div>
    <div class="dashboard-widget__content-wrap">
        <div class="dashboard-widget__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>
            Cras justo odio, dapibus ac facilisis in, egestas eget quam.
        </div>
    </div>
</div>
        </div>
    </div>
    <div class="grid-stack-item" gs-x="2" gs-y="0" gs-w="2" gs-h="1">
        <div class="grid-stack-item-content">
            <div class="dashboard-widget dashboard-widget--empty">
    <div class="dashboard-widget__title">
        Title
        <div class="dropdown">
            <button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="ti ti-chevron-down"></i>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
    </div>
    <div class="dashboard-widget__content-wrap">
        <div class="dashboard-widget__content">
            Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
        </div>
    </div>
</div>
        </div>
    </div>
    <div class="grid-stack-item" gs-x="0" gs-y="1" gs-w="1" gs-h="2">
        <div class="grid-stack-item-content">
            <div class="dashboard-widget">
    <div class="dashboard-widget__title">
        Title
        <div class="dropdown">
            <button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="ti ti-chevron-down"></i>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
    </div>
    <div class="dashboard-widget__content-wrap">
        <div class="dashboard-widget__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>
            Cras justo odio, dapibus ac facilisis in, egestas eget quam.
        </div>
        <div class="dashboard-widget__footer">
            <a href="#">Aktion im Footer</a>
        </div>
    </div>
</div>
        </div>
    </div>
    <div class="grid-stack-item" gs-x="1" gs-y="1" gs-w="1" gs-h="1">
        <div class="grid-stack-item-content">
            <div class="dashboard-widget">
    <div class="dashboard-widget__title">
        Title
        <div class="dropdown">
            <button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="ti ti-chevron-down"></i>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
    </div>
    <div class="dashboard-widget__content-wrap">
        <div class="dashboard-widget__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>
            Cras justo odio, dapibus ac facilisis in, egestas eget quam.
        </div>
    </div>
</div>
        </div>
    </div>
    <div class="grid-stack-item" gs-x="1" gs-y="2" gs-w="1" gs-h="1">
        <div class="grid-stack-item-content">
            <div class="dashboard-widget">
    <div class="dashboard-widget__title">
        Title
        <div class="dropdown">
            <button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="ti ti-chevron-down"></i>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
    </div>
    <div class="dashboard-widget__content-wrap">
        <div class="dashboard-widget__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>
            Cras justo odio, dapibus ac facilisis in, egestas eget quam.
        </div>
    </div>
</div>
        </div>
    </div>
    <div class="grid-stack-item" gs-x="3" gs-y="1" gs-w="2" gs-h="2">
        <div class="grid-stack-item-content">
            <div class="dashboard-widget">
    <div class="dashboard-widget__title">
        Title
        <div class="dropdown">
            <button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="ti ti-chevron-down"></i>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
    </div>
    <div class="dashboard-widget__content-wrap">
        <div class="dashboard-widget__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<br>
            <br>
            Cras justo odio, dapibus ac facilisis in, egestas eget quam.
        </div>
        <div class="dashboard-widget__footer">
            <a href="#">Aktion im Footer</a>
        </div>
    </div>
</div>
        </div>
    </div>
</div>

<script>
    const grid = GridStack.init({
        handle: '.dashboard-widget__title',
        margin: '1.5rem', // = $spacer
        column: 4,
        disableOneColumnMode: true,
        // Until we actually want the functionality
        disableDrag: true,
        disableResize: true,
    });
</script>