Content

Content is a layout component that provides a structured container for page content with built-in spacing plus named heading and body exports.

Preview

Page Title

Section Heading

This is the main content area. It has built-in spacing and supports both main headings and section subheadings.

Usage

tsx

1
2
3
4
5
6
7
8
9
import { Content, ContentBody, ContentHeading, ContentSubheading } from '@e-infra/design-system'

<Content>
  <ContentHeading>Welcome to Our Platform</ContentHeading>
  <ContentSubheading>Getting Started</ContentSubheading>
  <ContentBody>
    <p>Your content here</p>
  </ContentBody>
</Content>

Components

Component	Description
`Content`	Main container (div)
`ContentHeading`	Main heading built on `H1`
`ContentSubheading`	Subheading built on `H2`
`ContentBody`	Content body container (div)

Props

Content (Container)

Prop	Type	Default	Description
className	string	-	Additional CSS classes
children	React.ReactNode	-	Content children
...props	React.HTMLAttributes	-	Native div props

ContentHeading

Prop	Type	Default	Description
className	string	-	Additional CSS classes
children	React.ReactNode	-	Heading text
...props	React.HTMLAttributes	-	Native h1 props

ContentSubheading

Prop	Type	Default	Description
className	string	-	Additional CSS classes
children	React.ReactNode	-	Subheading text
...props	React.HTMLAttributes	-	Native h2 props

ContentBody

Prop	Type	Default	Description
className	string	-	Additional CSS classes
children	React.ReactNode	-	Body content
...props	React.HTMLAttributes	-	Native div props

Implementation Details

Part	Implementation
`Content`	`div` with `space-y-8 py-8 px-4`
`ContentHeading`	wraps the `H1` typography primitive
`ContentSubheading`	wraps the `H2` typography primitive
`ContentBody`	`div` with `space-y-4`

All parts accept className and pass through native HTML attributes for their underlying elements.

Spacing

Element	CSS
Container	`space-y-8 py-8 px-4`
Body	`space-y-4`