Skip to main content

​
Card Components

Proyecto Renacer uses three card component sizes for different content types and layouts: CardSm, CardMd, and CardLg.

​
CardSm.astro

Small card component ideal for feature grids and service highlights.

​
Props

​
title
string
required
The card heading displayed prominently.
​
text
string
required
The card body text description.

​
Slot Content

The component accepts children via the default slot, typically used for icons or visual elements placed above the title.

​
Usage Examples

Feature card with icon (from index.astro:87-98) 
<CardSm
  title="Vivienda Social"
  text="Respaldo total del MIDUVI enfocado en familias de escasos recursos sin vivienda propia."
>
  <div
    class="w-14 h-14 rounded-xl bg-primary/10 text-primary flex items-center justify-center mb-6"
  >
    <span class="material-symbols-outlined text-3xl">
      real_estate_agent
    </span>
  </div>
</CardSm>
Location highlight card (from index.astro:109-118) 
<CardSm
  title="Ubicación Estratégica"
  text="Terrenos ubicados en el próspero sector de Chaupi San Luis en Ambato."
>
  <div
    class="w-14 h-14 rounded-xl bg-secondary/10 text-slate-700 dark:text-slate-300 flex items-center justify-center mb-6"
  >
    <span class="material-symbols-outlined text-3xl">location_on</span>
  </div>
</CardSm>

​
Styling Details

CardSm includes:
  • Generous padding (p-8)
  • Rounded corners (rounded-2xl)
  • Light/dark theme support
  • Primary border accent (border-primary/20)
  • Hover shadow effect (hover:shadow-xl)
  • Smooth transitions
Source location: /workspace/source/src/components/CardSm.astro:1-20

​
CardMd.astro

Medium-sized card for showcasing project imagery with overlay badges and captions.

​
Features

  • Fixed aspect ratio (4:3)
  • Rounded corners with shadow
  • Gradient overlay for text readability
  • Badge component for project type
  • Text positioned at bottom-left
  • Group hover effects

​
Structure

The CardMd component is currently configured with a default image and project information. It displays:
  • A responsive image using Astro’s <Image> component
  • A gradient overlay from black to transparent
  • A “Proyecto Social” badge with secondary color
  • Project location text “Sector Chaupi San Luis”

​
Usage Example

Hero section card (from index.astro:69) 
<div class="flex-1 w-full">
  <CardMd />
</div>

​
Customization

To make CardMd more flexible, you could extend it to accept props: 
---
interface Props {
  image: ImageMetadata;
  badge: string;
  title: string;
  alt: string;
}
---

​
Styling Details

  • Container: relative w-full aspect-4/3 rounded-3xl overflow-hidden shadow-2xl
  • Image: object-cover w-full h-full
  • Overlay: absolute inset-0 bg-linear-to-t from-black/40 to-transparent
  • Badge: bg-secondary/90 backdrop-blur px-3 py-1 rounded-full
Source location: /workspace/source/src/components/CardMd.astro:1-26

​
CardLg.astro

Status: Currently empty in the source code. This component is available for implementation when large card layouts are needed.

​
Suggested Use Cases

  • Full-width feature showcases
  • Detailed project information panels
  • Testimonial cards with photos
  • Multi-column content sections
Source location: /workspace/source/src/components/CardLg.astro:1

​
Card Layout Patterns

​
Three-column grid (common pattern)

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  <CardSm title="Title 1" text="Description 1">
    <!-- Icon slot -->
  </CardSm>
  <CardSm title="Title 2" text="Description 2">
    <!-- Icon slot -->
  </CardSm>
  <CardSm title="Title 3" text="Description 3">
    <!-- Icon slot -->
  </CardSm>
</div>

​
Two-column layout with CardMd

<section class="flex flex-col lg:flex-row items-center gap-12">
  <div class="flex-1 flex flex-col gap-8">
    <!-- Text content -->
  </div>
  <div class="flex-1 w-full">
    <CardMd />
  </div>
</section>

​
Best Practices

  1. CardSm for features: Use in grids of 2-4 items to highlight key points or services
  2. Consistent iconography: Pair CardSm with Material Symbols icons in rounded containers
  3. Color coding: Use different background colors (bg-primary/10, bg-secondary/10) to visually group related cards
  4. Dark mode support: All cards include dark mode variants with dark: utilities
  5. Accessibility: Always provide descriptive title and text props for screen readers