DS nav
DS Example FORMS EXPERIMENT TYPE EXPERIMENT COLOR EXPERIMENT Halftone Example Layout Example Grids Example Theming All Images Example Scroll anims Example Colors Links Example Home
DS nav
DS Example FORMS EXPERIMENT TYPE EXPERIMENT COLOR EXPERIMENT Halftone Example Layout Example Grids Example Theming All Images Example Scroll anims Example Colors Links Example Home
Use
Box zone="full" subgrid around a box inset ✓
<Box
zone="full"
subgrid
style="outline: 3px solid blue; background-color: var(--orange-2);">
<Box
zone="inset-content"
style="outline: 3px solid green;background-color: var(--neutral-1);">
Use <code>Box zone="full" subgrid</code> around a box inset ✓
</Box>
</Box>full — text above
inset-content width via .content-wrapper--inset-content
<Box zone="full" style="outline: 3px solid orange;">
<p>full — text above</p>
<div
class="content-wrapper--inset-content"
style="outline: 3px dashed green;">
inset-content width via .content-wrapper--inset-content
</div>
</Box>some text above
narrower content
full
Box with texture
This site is under construction, and basically my playground for web technology.
<Box zone="inset-content defer-render">
<div class="mt-16 md:mt-0 scroll-reveal">
<Heading as="h2" class="mb-10">Box with texture</Heading>
<Picture />
<Text as="p" size="3" fontFamily="comic" class="mt-8 text-uppercase"
>This site is under construction, and basically my playground for
web technology.
</Text>
</div>
</Box>
</Box>