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