Components
Raven Design provides CSS classes for common UI patterns.
Layout
Components for structuring your content.
Container
Centered container with max-width and responsive padding.
Container content (max-width: 1200px)
<div class="raven-container">
Content here
</div>Content
Button
Interactive buttons with multiple variants and sizes.
Variants
Sizes
<button class="raven-button raven-button--primary raven-button--lg">
Click Me
</button>Card
Content container with shadow and hover effects.
Variants
Default
Bordered
Flat
With Content
Card Title
Card description
Card body content
<div class="raven-card">
<h3 class="raven-card__title">Title</h3>
<p>Content</p>
</div>Typography
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1 class="raven-h1">Heading 1</h1>Text Utilities
Primary text
Secondary text
Tertiary text
Bold text
Medium text
Underlined text
Centered text
Utilities
Utility classes for spacing, colors, layout, and more.
Spacing
Margin, padding, and gap utilities.
Padding XS
Padding SM
Padding MD
Padding LG
<div class="raven-p-md">Content</div>Colors
Background, text, and border colors.
Primary
Secondary
Success
Warning
Error
<div class="raven-bg-primary raven-text-inverse">Primary</div>Layout
Flexbox, grid, display, and positioning utilities.
Flex Item 1
Flex Item 2
Flex Item 3
<div class="raven-flex raven-gap-sm">
<div>Item 1</div>
<div>Item 2</div>
</div>