Dashboard Widget 

.dashboard-widget {
    $this: &;
    display: flex;
    flex-direction: column;

    &__title {
        align-items: center;
        //cursor: move;
        display: flex;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: $font-size-lg;
        gap: $spacer;
        justify-content: space-between;
        padding: ($spacer * 0.5) $spacer;
    }

    .dropdown-toggle {
        align-items: center;
        background-color: $gray-300;
        border: none;
        display: flex;
        padding: ($spacer * 0.25) ($spacer * 0.5);
        text-align: center;

        &::after {
            display: none;
        }
    }

    &__content-wrap {
        border-top: 1px solid $accent;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
    }

    &__content {
        flex: 1;
        overflow-y: scroll;
        padding: $spacer;
    }

    &__footer {
        align-items: center;
        display: flex;
        justify-content: center;
        line-height: 1;
        padding: $spacer;
    }

    &--empty {

        #{$this}__content-wrap {
            align-items: center;
            justify-content: center;
        }

        #{$this}__content {
            flex: 0;
            overflow: visible;
            text-align: center;
        }
    }
}

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. 
<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>

Leer

Title
Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 
<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>

Varianten