Skip to main content

​
Styling Guidelines

This page contains reusable UI components and styling patterns for consistent design across the Tenantum documentation.

​
Card Components

​
Standard Card

<Card title="Card Title" icon="icon-name" href="/link">
  Card content goes here.
</Card>

​
Styled Card with Custom Background

<Card
  title="Styled Card"
  icon="icon-name"
  href="/link"
  style={{
    background: "linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)",
    border: "1px solid #72D400",
    borderRadius: "0.75rem",
  }}
>
  Card with custom styling.
</Card>

​
Card with Hover Effects

<Card
  title="Interactive Card"
  icon="icon-name"
  href="/link"
  style={{
    transition: "transform 0.2s ease-in-out",
    ":hover": { transform: "translateY(-4px)" },
  }}
>
  Card with hover animation.
</Card>

​
Callout Boxes

​
Primary Callout

Info: This is a primary callout box using your brand color.

​
Light Callout

Note: This is a light callout box for secondary information.

​
Success Callout

Success: This is a success callout box.

​
Warning Callout

Warning: This is a warning callout box.

​
Error Callout

Error: This is an error callout box.

​
Button Styles

​
Primary Button

Primary Button

​
Secondary Button

Secondary Button

​
Light Button

Light Button

​
Gradient Backgrounds

​
Primary Gradient

​
Primary Gradient

Content with primary gradient background.

​
Light Gradient

​
Light Gradient

Content with light gradient background.

​
Subtle Gradient

​
Subtle Gradient

Content with subtle gradient background.

​
Feature Lists

​
Bullet Points with Icons

  • ✓ Feature item with icon
  • ✓ Another feature item
  • ✓ Third feature item

​
Code Styling

​
Inline Code

Use code for inline code snippets.

​
Code Blocks

// Example code block
function example() {
  console.log("Hello, Tenantum!");
}

​
Responsive Design

​
Mobile-First Approach

Note: All components are designed to be responsive and work well on mobile devices.

​
Color Palette

​
Primary Colors

  • Primary Green: #72D400
  • Primary Dark: #5AB800 (for gradients and hover states)
  • Text Primary: #374151
  • Text Secondary: #6c757d

​
Background Colors

  • Background Light: #ffffff
  • Background Gray: #f8f9fa
  • Border Light: #e9ecef

​
Accent Colors (for specific use cases only)

  • Success Green: #4caf50 (for success states)
  • Warning Orange: #ff9800 (for warnings)
  • Error Pink: #e91e63 (for errors)

​
Light Mode Only

This documentation is designed for light mode only. The theme switcher has been disabled to maintain consistent branding and user experience.

​
Benefits of Light Mode Only:

  • Consistent Branding: Maintains your green (#72D400) brand color visibility
  • Better Readability: High contrast text on light backgrounds
  • Simplified Maintenance: No need to maintain dark mode styles
  • Professional Appearance: Clean, modern look that matches your brand