ColivingLiguria

Apply Now

Colored Content Boxes

2 min read

Colored Content Boxes - Grid Layouts

These are the patterns we use for creating visually appealing content sections with varied colors.

Pattern 1: ColivingLiguria Fields (Internship Page)

Used for displaying categories with varied border colors using var(--secondary) and var(--tertiary).

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem;">
  
  {/* Pattern: Alternating secondary/tertiary */}
  <a href="/link" style="text-decoration: none; color: inherit; padding: 1.2rem; border-left: 4px solid var(--secondary);">
    <h4 style="margin: 0 0 0.5rem 0;">Category Title</h4>
    <p style="font-size: 0.9rem; margin: 0;">Description text</p>
  </a>
  
  <div style="padding: 1.2rem; border-left: 4px solid var(--tertiary);">
    <h4 style="margin: 0 0 0.5rem 0;">Another Category</h4>
    <p style="font-size: 0.9rem; margin: 0;">Description text</p>
  </div>
  
</div>

Key Features:

  • ✅ Responsive grid (auto-fill, minmax)
  • ✅ Uses CSS variables only (var( --secondary), var(--tertiary))
  • ✅ Auto-adapts to light/dark mode
  • ✅ Consistent padding and spacing

Pattern 2: Tourist Offer Boxes

Used for feature highlights with background colors and border accents.

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 2rem 0;">
  
  <div style="background: var(--highlight); padding: 1.5rem; border-radius: 12px; border-left: 4px solid var(--secondary);">
    <h3 style="margin-top: 0; color: var(--secondary);">🏡 Feature Title</h3>
    <p>Feature description goes here.</p>
  </div>
  
  <div style="background: var(--highlight); padding: 1.5rem; border-radius: 12px; border-left: 4px solid var(--tertiary);">
    <h3 style="margin-top: 0; color: var(--tertiary);">🌳 Another Feature</h3>
    <p>Feature description goes here.</p>
  </div>
  
</div>

Key Features:

  • ✅ Subtle background (var(--highlight))
  • ✅ Rounded corners (12px)
  • ✅ Colored left border for accent
  • ✅ Colored titles matching border

Pattern 3: Simple Box with Border

For callouts and highlighted content.

<div style="background: var(--lightgray); padding: 1.5rem; border-radius: 12px; margin: 2rem 0;">
  <h3 style="margin-top: 0;">📅 Title</h3>
  <p>Content goes here. This box uses lightgray background for dark mode compatibility.</p>
</div>

Key Features:

  • ✅ Never use white - always var(--lightgray)
  • ✅ Rounded corners for softer look
  • ✅ Adequate padding (1.5rem)

❌ What NOT to Do

<!-- BAD: Hardcoded white background -->
<div style="background: white;">
 
<!-- BAD: Hardcoded hex color -->
<div style="border-left: 4px solid #4A90E2;">
 
<!-- BAD: No responsiveness -->
<div style="width: 300px;">

✅ Best Practices

  1. Always use CSS variables for colors
  2. Use responsive grids with auto-fit or auto-fill
  3. Use var(--lightgray) instead of white for backgrounds
  4. Alternate var(--secondary) and var(--tertiary) for variety
  5. Include adequate margin between sections (2rem)

Graph View

Backlinks