Variation 1

Box Primitive

Padding, border, and inversion behavior pulled from the legacy box primitive.

My Box Heading

Boxes establish a padded content boundary with inherited text color and consistent outline behavior.

This standalone port keeps the original inversion pattern and stacked composition.

Inverted Box

The inverted variation flips light and dark colors while preserving spacing and border rules.

Variation 2

Center Primitive

Basic Example

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat quod iste quos odio, aspernatur exercitationem quas harum, cum, dolorum assumenda sunt ipsum officiis expedita. Laudantium nihil quis voluptas debitis nesciunt?

Variation 3

Stack Primitive - Successive

Stack adds vertical rhythm only where elements meet.

Stack is a primitive layout component that can be used to create consistent vertical spacing between elements in a layout. It can be used in both successive and recursive modes, depending on the desired spacing behavior.

In successive mode:

Stack applies spacing only between direct siblings, meaning that only elements that are directly adjacent to each other will have spacing applied.

This is useful for creating a clean and organized layout where elements are clearly separated.

In recursive mode:

Stack applies spacing between all nested elements, regardless of their hierarchy.

This means that even elements that are not direct siblings will have spacing applied between them.

Variation 4

Stack Primitive - Recursive

Stack adds vertical rhythm only where elements meet.

Stack is a primitive layout component that can be used to create consistent vertical spacing between elements in a layout. It can be used in both successive and recursive modes, depending on the desired spacing behavior.

In successive mode:

Stack applies spacing only between direct siblings, meaning that only elements that are directly adjacent to each other will have spacing applied.

This is useful for creating a clean and organized layout where elements are clearly separated.

In recursive mode:

Stack applies spacing between all nested elements, regardless of their hierarchy.

This means that even elements that are not direct siblings will have spacing applied between them.

Variation 5

Sidebar Primitive

Responsive Content Area

The sidebar primitive uses flex-basis and flex-grow rules so one side becomes dominant content when space allows.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, magni inventore? Quis nam suscipit, sit dolorem, excepturi ut cupiditate molestiae velit sequi commodi, libero eligendi! Quam molestiae est itaque recusandae?Nemo, placeat? Vero placeat ad fuga aspernatur sit minus fugit ea, culpa iusto hic delectus doloribus ipsa aliquam cum repudiandae impedit. Placeat recusandae rerum accusantium? Alias quisquam neque tempora hic.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, magni inventore? Quis nam suscipit, sit dolorem, excepturi ut cupiditate molestiae velit sequi commodi, libero eligendi! Quam molestiae est itaque recusandae?Nemo, placeat? Vero placeat ad fuga aspernatur sit minus fugit ea, culpa iusto hic delectus doloribus ipsa aliquam cum repudiandae impedit. Placeat recusandae rerum accusantium? Alias quisquam neque tempora hic.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, magni inventore? Quis nam suscipit, sit dolorem, excepturi ut cupiditate molestiae velit sequi commodi, libero eligendi! Quam molestiae est itaque recusandae?Nemo, placeat? Vero placeat ad fuga aspernatur sit minus fugit ea, culpa iusto hic delectus doloribus ipsa aliquam cum repudiandae impedit. Placeat recusandae rerum accusantium? Alias quisquam neque tempora hic.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, magni inventore? Quis nam suscipit, sit dolorem, excepturi ut cupiditate molestiae velit sequi commodi, libero eligendi! Quam molestiae est itaque recusandae?Nemo, placeat? Vero placeat ad fuga aspernatur sit minus fugit ea, culpa iusto hic delectus doloribus ipsa aliquam cum repudiandae impedit. Placeat recusandae rerum accusantium? Alias quisquam neque tempora hic.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, magni inventore? Quis nam suscipit, sit dolorem, excepturi ut cupiditate molestiae velit sequi commodi, libero eligendi! Quam molestiae est itaque recusandae?Nemo, placeat? Vero placeat ad fuga aspernatur sit minus fugit ea, culpa iusto hic delectus doloribus ipsa aliquam cum repudiandae impedit. Placeat recusandae rerum accusantium? Alias quisquam neque tempora hic.

Variation 6

Sidebar Primitive

Responsive Content Area

The sidebar primitive uses flex-basis and flex-grow rules so one side becomes dominant content when space allows.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, magni inventore? Quis nam suscipit, sit dolorem, excepturi ut cupiditate molestiae velit sequi commodi, libero eligendi! Quam molestiae est itaque recusandae?Nemo, placeat? Vero placeat ad fuga aspernatur sit minus fugit ea, culpa iusto hic delectus doloribus ipsa aliquam cum repudiandae impedit. Placeat recusandae rerum accusantium? Alias quisquam neque tempora hic.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, magni inventore? Quis nam suscipit, sit dolorem, excepturi ut cupiditate molestiae velit sequi commodi, libero eligendi! Quam molestiae est itaque recusandae?Nemo, placeat? Vero placeat ad fuga aspernatur sit minus fugit ea, culpa iusto hic delectus doloribus ipsa aliquam cum repudiandae impedit. Placeat recusandae rerum accusantium? Alias quisquam neque tempora hic.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, magni inventore? Quis nam suscipit, sit dolorem, excepturi ut cupiditate molestiae velit sequi commodi, libero eligendi! Quam molestiae est itaque recusandae?Nemo, placeat? Vero placeat ad fuga aspernatur sit minus fugit ea, culpa iusto hic delectus doloribus ipsa aliquam cum repudiandae impedit. Placeat recusandae rerum accusantium? Alias quisquam neque tempora hic.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, magni inventore? Quis nam suscipit, sit dolorem, excepturi ut cupiditate molestiae velit sequi commodi, libero eligendi! Quam molestiae est itaque recusandae?Nemo, placeat? Vero placeat ad fuga aspernatur sit minus fugit ea, culpa iusto hic delectus doloribus ipsa aliquam cum repudiandae impedit. Placeat recusandae rerum accusantium? Alias quisquam neque tempora hic.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, magni inventore? Quis nam suscipit, sit dolorem, excepturi ut cupiditate molestiae velit sequi commodi, libero eligendi! Quam molestiae est itaque recusandae?Nemo, placeat? Vero placeat ad fuga aspernatur sit minus fugit ea, culpa iusto hic delectus doloribus ipsa aliquam cum repudiandae impedit. Placeat recusandae rerum accusantium? Alias quisquam neque tempora hic.

Variation 7

Grid Cards

Card A

Auto-fit grid item.

Card B

Minimum width respected.

Card C

Wraps without media queries.

Card D

Legacy grid primitive behavior.

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

Variation 8

Cluster Primitive

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut qui blanditiis porro nesciunt impedit earum exercitationem animi ab, alias dignissimos nisi cupiditate iusto optio enim perferendis! Nobis aspernatur facere consequatur?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut qui blanditiis porro nesciunt impedit earum exercitationem animi ab, alias dignissimos nisi cupiditate iusto optio enim perferendis! Nobis aspernatur facere consequatur?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut qui blanditiis porro nesciunt impedit earum exercitationem animi ab, alias dignissimos nisi cupiditate iusto optio enim perferendis! Nobis aspernatur facere consequatur?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut qui blanditiis porro nesciunt impedit earum exercitationem animi ab, alias dignissimos nisi cupiditate iusto optio enim perferendis! Nobis aspernatur facere consequatur?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut qui blanditiis porro nesciunt impedit earum exercitationem animi ab, alias dignissimos nisi cupiditate iusto optio enim perferendis! Nobis aspernatur facere consequatur?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut qui blanditiis porro nesciunt impedit earum exercitationem animi ab, alias dignissimos nisi cupiditate iusto optio enim perferendis! Nobis aspernatur facere consequatur?

Variation 9

Cover Primitive

Header

uncentered element

Main Elements (centered)

Article

Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi sed distinctio hic molestiae cupiditate minima, eos non in nostrum sunt, recusandae vel ratione modi nisi corrupti adipisci error fugiat facere!

Variation 10

Frame Primitive

Variation 11

Icon Primitive

Close

Variation 12

Holy Grail Primitive

Left Side Bar

Lorem ipsum dolor sit amet.
Voluptas natus quae voluptate id?
Cupiditate ad optio ea repellat.
Officiis qui alias ab tenetur.
Dolore consequatur in nobis natus?

Main Container Holy Grail

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam incidunt voluptates, fugiat officia aliquid repudiandae esse dolor, accusamus aspernatur veritatis perspiciatis aut. Maxime corrupti, earum sequi cumque dolorem vero molestias.

Right Side Bar

Lorem ipsum dolor sit amet.
Voluptas natus quae voluptate id?
Cupiditate ad optio ea repellat.
Officiis qui alias ab tenetur.
Dolore consequatur in nobis natus?

Variation 13

Imposter Primitive

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

imposter card

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

Variation 14

Reel Primitive

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

card heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere maxime qui ipsa enim consequuntur laboriosam vel soluta sint tempore praesentium rem, cupiditate aperiam magnam impedit, ad tempora odit blanditiis laborum?

Variation 15

Switcher Primitive

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam adipisci assumenda mollitia ut perspiciatis, repudiandae eligendi officiis laboriosam architecto, ducimus ea atque tempora qui deleniti libero, nisi quos culpa quis!

Variation 16

Box Primitive

My Box Heading

Inverted Box

Center Primitive

Basic Example

Stack Primitive - Successive

Stack Primitive - Recursive

Sidebar Primitive

Responsive Content Area

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Sidebar Primitive

Responsive Content Area

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Grid Cards

Card A

Card B

Card C

Card D

card heading

card heading

card heading

card heading

card heading

card heading

Cluster Primitive

Cover Primitive

Main Elements (centered)

Article

Frame Primitive

Icon Primitive

Holy Grail Primitive

Left Side Bar

Main Container Holy Grail

Right Side Bar

Imposter Primitive

card heading

card heading

card heading

card heading

card heading

card heading

imposter card

Reel Primitive

card heading

card heading

card heading

card heading

card heading

card heading

Switcher Primitive

Sidebar w. Media Object

Heading

Heading