Blue Button Green Button Red Button Purple Button Cyan Button Yellow Button Small Medium Large Disabled Button Section Title This paragraph will have consistent spacing from the heading above. This paragraph will have the same spacing from the paragraph above. This paragraph will have the same spacing from the paragraph above. This is a basic card with no header. It provides a container with standard padding and border. This card includes a header with the box title. The header and border share the same color based on the variant. Card with primary blue styling Card with success green styling Card with danger red styling
Action Cancel
This card includes action buttons in the header. Actions can be any elements slotted into the 'header' slot. Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6 Blue Heading Green Heading Red Heading Purple Heading Left Aligned Heading Center Aligned Heading Right Aligned Heading Body text is the standard text used for most content. It should be legible at typical reading distances and sizes. Small text is used for less important information that still needs to be readable. Caption text is used for annotations, footnotes, and other auxiliary information. Primary text color Secondary text color Dimmed text color Blue accent text Green accent text This text is aligned to the left, which is the default for most text in left-to-right languages. This text is centered, which can be useful for headings or special content that needs emphasis. This text is aligned to the right, which might be used for certain design elements or for right-to-left languages. Grid item 1 Grid item 2 with more content to demonstrate alignment differences. Grid item 3 Grid item 4 Grid item 5 Grid item 6 Grid item 1 Grid item 2 with more content to demonstrate alignment differences. Grid item 3 Grid item 4 Grid item 1 Grid item 2 with more content to demonstrate alignment differences. Grid item 3 Grid item 4 16:9 placeholder image 4:3 placeholder image object-fit: cover (default) Image with cover fit object-fit: contain Image with contain fit
Framed Content This frame contains other Blackout components with proper centering.
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Card 1 This is card content 1. Card 2 This is card content 2. Card 3 This is card content 3. Card 4 This is card content 4. Card 5 This is card content 5. Card 6 This is card content 6. Card 7 This is card content 7. Card 8 This is card content 8.
This box is centered over its container
Margin Space This imposter maintains at least 2rem from the edges
Breaking Out This content extends beyond the container's boundaries The breakout property allows oversized content to display naturally
This box will stack vertically when the container width is less than 400px. This demonstrates a basic container query in action.
Card 1 Card content that adapts based on the container width. Card 2 Another card with adaptive layout. Card 3 A third card in the adaptive grid. Card 4 Fourth card that will reflow based on container width.
Outer Container This is the outer container. It changes background when its width is less than 600px.
Inner Container This is the inner container. Its border changes color when its width is less than 300px. Container queries target the nearest matching container by default, but named containers allow precise targeting.
After logging in, check the UserBadge component to see the update This badge shows the login state set by the LoginForm Reset Login State This content is centered horizontally with a maximum width of 60ch (characters). The Center component ensures proper readability by limiting line length while maintaining a balanced layout. Constrained Width This centered box has a maximum width of 400px, demonstrating how to control the content width precisely. This content has wider gutters (minimum space) on either side, ensuring it never gets too close to the viewport edges, even on smaller screens. Intrinsic Width This content determines its own width rather than expanding to fill the maximum available width. Centered Article This example demonstrates a typical article layout with centered content. The Center component maintains readability by ensuring the text doesn't span too wide, which would make it difficult to read. Important information can be highlighted in boxes, while still maintaining the overall centered layout and maximum width constraints. Additional paragraphs maintain the same width restrictions, creating a consistent and readable experience throughout the content.
👉 Resize this container to see how Center responds 👈 Responsive Center The Center component maintains proper spacing at all viewport sizes. When the viewport is narrower than the maximum width plus gutters, the content area shrinks while preserving the gutters.
Item 1 Item 2 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 JavaScript CSS HTML TypeScript Web Components Lit Design Systems Blackout Home Components Documentation About Form Content Cancel Submit
👉 Resize this container to see how Cluster responds 👈 Item 1 Item 2 Item with longer content Item 4 Item 5
List item 1
List item 2
List item 3
Navigation Sidebar content Menu items could go here Main Content This is the main content area. It takes up more space than the sidebar and will wrap below the sidebar when the container becomes too narrow. Main Content This is the main content area. It appears on the left with the sidebar on the right. Details Sidebar content can include metadata or related information. Narrow Sidebar This sidebar has a 15rem width when in horizontal layout. Main Content The main content area adjusts to fill the remaining space.
👉 Resize this container to see how Sidebar responds 👈 Sidebar This layout will switch to vertical when the content area would become less than 66.666% of the container width. Main Content Resize the container to see how the layout responds. When it becomes too narrow, the sidebar will move below this content.
Sidebar This sidebar has a different height than the main content. Main Content With noStretch enabled, elements are allowed to have their natural height instead of stretching to match each other. This results in elements that can have different heights, which can be useful in some cases. For example, when the content naturally requires more vertical space than the sidebar. Item 1 Item 2 Item 3 Item 1 Item 2 Item 3 Item 1 Item 2 Item 3 Item 1 Item 2 Item 3 Item 4 Item 5
👉 Resize this container to see how Switcher responds 👈 Panel 1 This will switch between horizontal and vertical layout based on the available space. Panel 2 When the container width is less than the threshold, items will stack vertically.
Centered Heading Header Centered Heading Footer This is an icon. This is a basic modal with default settings. Open Basic Modal