Content Component

index

5

status

Draft

The Content component handles text and other content within elements, with full typography control and interactive variants.

Basic Usage

<Content color="white" fontWeight="500" padding="0.5rem 1rem">
  Button Text
</Content>

Props

Typography

• color – Text color
• fontSize – Font size
• fontWeight – Font weight
• fontFamily – Font family
• textAlign – Text alignment
• textTransform – Text transform (uppercase, etc.)
• textDecoration – Text decoration (underline, etc.)
• lineHeight – Line height
• letterSpacing – Letter spacing
• textShadow – Text shadow

Layout

• padding – Internal padding
• margin – External margin
• width, height – Dimensions

Advanced

• textOverflow, whiteSpace, wordBreak, wordWrap – Text overflow handling
• elevation – Z-index stacking order
• variants – State-specific property overrides

Interactive Typography

<Content 
  color="black" 
  fontWeight="400"
  variants={{
    default: { color: "black" },
    hover: { 
      color: "blue",
      textShadow: "0 1px 2px rgba(0,0,0,0.1)" 
    },
    pressed: { 
      color: "darkblue" 
    }
  }}
>
  Interactive Text
</Content>