Sidesheet

It is used to show more details about a certain object or perform editing actions, configuration, fill in forms and apply information.

Code
Usage

Allows the user to select a single item from a dropdown list of options.

Form sidesheet

<div class="side-panel edit" id="sideSheetFormExample">
    <div class="top">
        <span class="material-symbols-outlined">edit</span>
        <h3>Edit schedule</h3>
        <div class="btn-container">
            <button class="btn btn-icon icon-24 close material-symbols-outlined">close</button>
        </div>
    </div>
    <div class="scroll-container gap8">
        <div class="data-row">
            <span class="label">Type of request:</span>
            <span class="data">Modification</span>
        </div>
        <div class="data-row">
            <span class="label">Days:</span>
            <span class="data">MTWTFSS</span>
        </div>
        <div class="data-row">
            <span class="label">Time:</span>
            <span class="data">10.00 - 18.00</span>
        </div>
        <div class="data-row">
            <span class="label">Validity:</span>
            <span class="data">01/06/2021 - 01/07/2021</span>
        </div>
        <div class="data-row">
            <span class="label">Consulting room:</span>
            <span class="data">Consulting room 101</span>
        </div>
        <div class="data-row">
            <span class="label">Duration:</span>
            <span class="data">20 minutes</span>
        </div>
        <div class="data-row">
            <span class="label">Interval:</span>
            <span class="data">10 minutes</span>
        </div>
        <div class="data-row">
            <span class="label">Anticipation:</span>
            <span class="data">1 hour</span>
        </div>
        <div class="data-row">
            <span class="label">Modality:</span>
            <span class="data">Face-to-face</span>
        </div>
        <div class="form-field vertical auto-height mtauto">
            <p class="h300 mb16">Advanced</p>
            <div class="flex-h gap24 mt8 flex-wrap">
                <div class="flex-h">
                    <input type="checkbox" id="global">
                    <label for="global">Global</label>
                </div>
                <div class="flex-h">
                    <input type="checkbox" id="web">
                    <label for="web">Web</label>
                </div>
            </div>
        </div>
    </div>
</div>

content_copy

Only content sidesheet

<div class="side-panel comment" id="sideSheetContentExample">
    <div class="top">
        <span class="material-symbols-outlined">feedback_outline</span>
        <h3>Comments</h3>
        <div class="btn-container">
            <button class="btn btn-icon icon-24 close material-symbols-outlined">close</button>
        </div>
    </div>
    <div class="scroll-container">
        <div class="comment">
            <div>
                <span class="bold">Name:</span> <span>John Doe</span>
            </div>
            <p class="comment-text">A short description with summary details to inform user without exit from the current screen.</p>
        </div>
        <div class="comment">
            <div>
                <span class="bold">Name:</span> <span>John Doe</span>
            </div>
            <p class="comment-text">A short description with summary details to inform user without exit from the current screen.</p>
        </div>
    </div>
</div>

content_copy

General guidelines

Side sheets are anchored to the left or right edge of the screen. They are a fixed width and typically span the height of the screen.

They can display a wide variety of content and layouts, ranging from a list of actions to supplemental content in a tabular layout.

They accept short tasks that can be accomplished in a single screen, such as configuring options.

Structure

Sheet: Commonly find it on the right side with information details.

Content: Indicates the information to edit.

Select Options: Can be optional. Allows you to edit advanced filter options.

Place side sheets along the left or right edge of the screen.
Side sheets can vertically scroll internally when their content exceeds the screen height.

DON'T

Don't fully inset a side sheet from the screen edges.
Don't allow horizontal scrolling in a side sheet or layout in a way that suggests horizontal scrolling.