hipstersmoothie.com
A design system in a box.
hip-ui.tngl.io/docs/introduction
1import { Content } from "@/components/content";
2import { Body, Heading1, Heading2, Heading3 } from "@/components/typography";
3
4export function Basic() {
5 return (
6 <Content>
7 <Heading1>Main Heading</Heading1>
8 <Body>
9 This is a paragraph with proper spacing applied by the Content wrapper.
10 The Content component automatically applies consistent margins to
11 headings, paragraphs, and other content elements.
12 </Body>
13 <Heading2>Section Heading</Heading2>
14 <Body>
15 Another paragraph that demonstrates the spacing between elements. The
16 Content wrapper ensures consistent vertical rhythm throughout your
17 content.
18 </Body>
19 <Heading3>Subsection</Heading3>
20 <Body>
21 Content spacing is automatically handled for all child elements.
22 </Body>
23 </Content>
24 );
25}