January 1, 2024 · 1 min read

Containment

Containment components
containment.webp

See: Material Design 3 - Components

Cards
Basic
Elevated
Elevated - Disabled
Filled
Filled- Disabled
Outlined
Outlined - Disabled
W
Header - horizontal
Subhead
image
W
Header - horizontal
Subhead
image
W
Header - horizontal
Subhead
image
W
Header - stacked
Subhead
more_vert
image
Title
Subtitle
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non blanditiis voluptas, repellat, impedit, sit reprehenderit nam et ipsa eius amet rem! Eligendi sequi magnam exercitationem vel dignissimos similique, atque earum.
W
Header - stacked
Subhead
more_vert
image
Title
Subtitle
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non blanditiis voluptas, repellat, impedit, sit reprehenderit nam et ipsa eius amet rem! Eligendi sequi magnam exercitationem vel dignissimos similique, atque earum.
W
Header - stacked
Subhead
more_vert
image
Title
Subtitle
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non blanditiis voluptas, repellat, impedit, sit reprehenderit nam et ipsa eius amet rem! Eligendi sequi magnam exercitationem vel dignissimos similique, atque earum.
Carousels
Hero
image
image
Center-aligned hero
image
image
image
Multi-browse
image
image
image
Uncontained
image
image
image
image
image
image
Full-screen
image
image
image
Subcomponents
image
image
image
Label
Label Supporting text
Dialogs
Basic dialog
Basic dialog
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non blanditiis voluptas, repellat, impedit, sit reprehenderit nam et ipsa eius amet rem! Eligendi sequi magnam exercitationem vel dignissimos similique, atque earum.
chat Basic dialog with icon
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non blanditiis voluptas, repellat, impedit, sit reprehenderit nam et ipsa eius amet rem! Eligendi sequi magnam exercitationem vel dignissimos similique, atque earum.
Full screen dialog
Full screen dialog Save
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non blanditiis voluptas, repellat, impedit, sit reprehenderit nam et ipsa eius amet rem! Eligendi sequi magnam exercitationem vel dignissimos similique, atque earum.
Dividers
Horizontal
Mid inset
Start inset
End inset
No inset
Vertical
Mid inset
Start inset
End inset
No inset
Lists
Lists
One line lists
List-item
List-item disabled
List-item
List-item
arrow_right
A
List-item
A
List-item
A
List-item
arrow_right
person
List-item
person
List-item
person
List-item
arrow_right
List-item
List-item
List-item
List-item
List-item
List-item
100+
List-item
List-item
100+
List-item
person
List-item
Two line lists
List-item Two lines
List-item disabled Two lines
List-item Two lines
List-item Two lines
arrow_right
A
List-item Two lines
A
List-item Two lines
A
List-item Two lines
arrow_right
person
List-item Two lines
person
List-item Two lines
person
List-item Two lines
arrow_right
List-item Two lines
List-item Two lines
List-item Two lines
List-item Two lines
List-item Two lines
List-item Two lines
100+
List-item Two lines
List-item Two lines
100+
List-item Two lines
person
List-item Two lines
Three line lists
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
List-item disabled Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
arrow_right
A
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
A
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
A
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
arrow_right
person
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
person
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
person
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
arrow_right
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
100+
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
100+
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
person
List-item Three lines Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis itaque et doloremque ut dolore vero ipsum ullam fuga.
Subcomponents
Monogram
A
Image thumbnail
Video thumbnail
Sheets
Bottom sheets
Standard bottom sheet
Modal bottom sheet
Side sheets
Standard side sheet
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae doloribus deleniti reiciendis adipisci doloremque necessitatibus dolorem facilis, tenetur maxime illum et aliquid, molestias deserunt tempore ut nostrum non amet corrupti!
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae doloribus deleniti reiciendis adipisci doloremque necessitatibus dolorem facilis, tenetur maxime illum et aliquid, molestias deserunt tempore ut nostrum non amet corrupti!
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae doloribus deleniti reiciendis adipisci doloremque necessitatibus dolorem facilis, tenetur maxime illum et aliquid, molestias deserunt tempore ut nostrum non amet corrupti!
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae doloribus deleniti reiciendis adipisci doloremque necessitatibus dolorem facilis, tenetur maxime illum et aliquid, molestias deserunt tempore ut nostrum non amet corrupti!
Modal side sheets
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae doloribus deleniti reiciendis adipisci doloremque necessitatibus dolorem facilis, tenetur maxime illum et aliquid, molestias deserunt tempore ut nostrum non amet corrupti!
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae doloribus deleniti reiciendis adipisci doloremque necessitatibus dolorem facilis, tenetur maxime illum et aliquid, molestias deserunt tempore ut nostrum non amet corrupti!
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae doloribus deleniti reiciendis adipisci doloremque necessitatibus dolorem facilis, tenetur maxime illum et aliquid, molestias deserunt tempore ut nostrum non amet corrupti!
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae doloribus deleniti reiciendis adipisci doloremque necessitatibus dolorem facilis, tenetur maxime illum et aliquid, molestias deserunt tempore ut nostrum non amet corrupti!