Containers

Containers group related content into clear regions—cards, panels, callouts—so layouts stay readable and consistent. They give typography predictable padding, constrain widths, and let you swap backgrounds or borders to convey emphasis without rewriting every block.

Regular

Standard containers provide balanced padding and a neutral surface, ideal for grouping paragraphs, forms, or small widgets. Use them to separate sections on a page without heavy chrome; keep nesting shallow to avoid cramped layouts, and let the container handle spacing instead of adding ad-hoc margins to children.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et iure ducimus voluptas architecto tenetur itaque assumenda vitae fugit doloribus, hic commodi vel molestiae dolore cupiditate distinctio deleniti illo provident ab!

Tip: prefer a single container per logical chunk and rely on consistent spacing tokens, so vertical rhythm stays predictable between sections.

<div class="container">...</div>

Colors

Colored containers use Catppuccin palette hues to add hierarchy—call attention to warnings, highlight tips, or distinguish sidebars from the main thread. Choose a tone that reinforces intent (Peach for notices, Green for success) and keep text contrast high for readability. Explore the full palette at the Catppuccin site.

Rosewater container

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo iure laudantium at fuga vero ad perspiciatis quisquam magnam, optio saepe natus voluptatem, quidem, ab! Provident repellendus modi et accusantium reiciendis.

Flamingo container

Pink container

Mauve container

Red container

Maroon container

Peach container

Yellow container

Green container

Teal container

Sky container

Sapphire container

Blue container

Lavender container

Gray container

<div class="container rosewater">...</div>
<div class="container flamingo">...</div>
<div class="container pink">...</div>
<div class="container mauve">...</div>
<div class="container red">...</div>
<div class="container maroon">...</div>
<div class="container peach">...</div>
<div class="container yellow">...</div>
<div class="container green">...</div>
<div class="container teal">...</div>
<div class="container sky">...</div>
<div class="container sapphire">...</div>
<div class="container blue">...</div>
<div class="container lavender">...</div>
<div class="container gray">...</div>

Mock browser

Mock browser containers frame content inside a faux browser window, useful for showcasing UI screenshots, code outputs, or embedded demos without leaving the page. Use them to tell stories about web experiences while keeping the focus on the captured content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem earum temporibus, exercitationem fugit illo placeat qui debitis quos soluta. Iusto a odit libero fugit excepturi numquam sapiente omnis quos unde?

<div class="container browser">
  <main>...</main>
</div>

URL

URL labels reinforce context by displaying the address bar above the content. Populate it with a representative domain or route to help readers understand where the captured view would live, and keep it concise so it doesn’t overpower the mock frame.

http://nausikaa.site

Animi consequatur deleniti accusamus quia, voluptates similique, veniam, asperiores, modi quo odit ratione mollitia rerum autem quod iusto. Odio, voluptas tenetur asperiores delectus quasi saepe adipisci eius quia provident facere.

<div class="container browser">
  <span class="url">http://...</span>
  <main>...</main>
</div>