Bottom Sheet

Open in Figma View all renders

The bottom sheet is a dialog element that contains information or micro journeys. The bottom sheet relies on the presence of either a title bar or action bar to provide an element that will dismiss the modal. This example has the open attribute for visibility, but this should be avoided when used in a real scenario as this does not apply the modal behaviour. Instead, use the showModal() and close() functions on the bottom sheet element, called by an appropriately labelled dismiss button or element. 

<dialog class="bottom-sheet" open>
    <div class="bottom-sheet__container">
        <div class="bottom-sheet__title">
            <div class="title-bar">
                <div class="title-bar__icon">
                    <span class="material-symbols-rounded">help</span>
                </div>
                <div class="title-bar__content">
                    <div class="title-bar__heading">
                        Card title
                    </div>
                </div>
                <div class="title-bar__dismiss">
                    <button class="btn btn--text"
                            aria-label="Dismiss">
                        <span>
                             <span class="material-symbols-rounded">close</span>
                        </span>
                    </button>
                </div>
            </div>
        </div>
        <div class="bottom-sheet__content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
            voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
            adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequuntur ipsa
            sapiente a rror minima ea, labore quibusdam placeat maxime praesentium repellendus itaque inventore
            temporibus accusantium ducimus commodi totam dolore?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
            voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
            adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequuntur ipsa
            sapiente a rror minima ea, labore quibusdam placeat maxime praesentium repellendus itaque inventore
            temporibus accusantium ducimus commodi totam dolore?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
            voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
            adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequuntur ipsa
            sapiente a rror minima ea, labore quibusdam placeat maxime praesentium repellendus itaque inventore
            temporibus accusantium ducimus commodi totam dolore?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
            voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
            adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequuntur ipsa
            sapiente a rror minima ea, labore quibusdam placeat maxime praesentium repellendus itaque inventore
            temporibus accusantium ducimus commodi totam dolore?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
            voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
            adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequuntur ipsa
            sapiente a rror minima ea, labore quibusdam placeat maxime praesentium repellendus itaque inventore
            temporibus accusantium ducimus commodi totam dolore?
        </div>
        <div class="action-bar">
            <button class="btn btn--small">button</button>
        </div>
    </div>
</dialog>