DescripcionDetalle (Detail Description)

Card component for displaying project descriptions with purple gradient background

Overview

The DescripcionDetalle component is a styled Material-UI card that displays project descriptions on detail pages. It features a distinctive purple background that contrasts with other page elements.

Props

descripcion · string · required

The project description text to display

Usage

Used below the project title to provide a brief overview:

src/pages/ProyectoDetalle.jsx

import DescripcionDetalle from "../components/DescripcionDetalle";

<DescripcionDetalle descripcion={proyectoData.descripcion} />

Real example from source data:

<DescripcionDetalle 
  descripcion="Dispositivo demostrativo de electrostática que utiliza la atracción y repulsión de cargas para generar movimiento oscilatorio." 
/>

Component Structure

src/components/DescripcionDetalle.jsx

import { Card, CardContent } from "@mui/material";

function DescripcionDetalle({ descripcion }) {
  return (
    <Card sx={{ mb: 4, backgroundColor: "#836FFF" }}>
      <CardContent>
        <p
          style={{
            color: "#F0F3FF",
            fontSize: "1.1rem",
            textAlign: "center",
            margin: 0,
          }}
        >
          {descripcion}
        </p>
      </CardContent>
    </Card>
  );
}

Styling Details

Card Styling

Property	Value	Purpose
backgroundColor	#836FFF (purple)	Brand accent color
mb (margin-bottom)	4 (32px)	Spacing from next element

Text Styling

Property	Value	Purpose
color	#F0F3FF (light)	High contrast on purple
fontSize	1.1rem (17.6px)	Slightly larger than body text
textAlign	center	Centered for emphasis
margin	0	Removes default p margins

Material-UI Components

Card

Provides elevation, rounded corners, and container structure:

import { Card } from "@mui/material";

CardContent

Adds consistent padding inside the card:

import { CardContent } from "@mui/material";

Default padding: 16px on all sides

Color Contrast

The purple background (#836FFF) with light text (#F0F3FF) provides:

• Contrast ratio: ~8.5:1 (exceeds WCAG AAA standard)
• Accessibility: Excellent readability

Customization Examples

Different Background Color

<Card sx={{ mb: 4, backgroundColor: "#15F5BA" }}>
  <p style={{ color: "#211951" }}>{descripcion}</p>
</Card>

Gradient Background

<Card 
  sx={{ 
    mb: 4, 
    background: "linear-gradient(135deg, #836FFF, #15F5BA)" 
  }}
>

Left-Aligned Text

<p
  style={{
    color: "#F0F3FF",
    fontSize: "1.1rem",
    textAlign: "left",  // Changed from center
    margin: 0,
  }}
>

Larger Text

fontSize: "1.25rem",  // 20px

Add Icon

import InfoIcon from "@mui/icons-material/Info";

<CardContent>
  <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
    <InfoIcon sx={{ color: "#F0F3FF" }} />
    <p style={{ ... }}>{descripcion}</p>
  </div>
</CardContent>

Responsive Behavior

The card automatically adjusts to container width. For better mobile experience:

<Card 
  sx={{ 
    mb: 4, 
    backgroundColor: "#836FFF",
    mx: { xs: 2, sm: 0 },  // Horizontal margin on mobile
  }}
>
  <CardContent>
    <p
      style={{
        color: "#F0F3FF",
        fontSize: "clamp(1rem, 2vw, 1.1rem)",  // Responsive size
        textAlign: "center",
        margin: 0,
      }}
    >
      {descripcion}
    </p>
  </CardContent>
</Card>

Usage in Context

Typical placement on detail pages:

<div style={{ maxWidth: "1100px", margin: "auto", padding: "40px 20px" }}>
  <TituloDetalle>{proyectoData.titulo}</TituloDetalle>
  <DescripcionDetalle descripcion={proyectoData.descripcion} />
  
  <Agrupar>
    <ColumnaGrande>
      <ImageCarousel images={proyectoData.imagenes} />
    </ColumnaGrande>
    <Grupo>
      <TarjetasContenido titulo="Integrantes" contenido={...} />
    </Grupo>
  </Agrupar>
</div>

Material-UI Theme Integration

If using a custom Material-UI theme:

backgroundColor: theme.palette.secondary.main,

Or with theme provider:

import { useTheme } from '@mui/material/styles';

function DescripcionDetalle({ descripcion }) {
  const theme = useTheme();
  
  return (
    <Card sx={{ 
      mb: 4, 
      backgroundColor: theme.palette.secondary.main 
    }}>
      ...
    </Card>
  );
}

Best Practices

Keep descriptions concise (2-3 sentences maximum) for optimal readability in this centered format.

The purple background (#836FFF) matches the secondary accent color used throughout the application, maintaining visual consistency.

Material-UI’s Card component includes subtle shadows and rounded corners by default, enhancing the depth and polish of the design.

Accessibility

Screen Readers

The component uses semantic HTML (<p> tag) that screen readers handle correctly.

Color Contrast

• Current: 8.5:1 contrast ratio (✅ WCAG AAA)
• Minimum required: 4.5:1 for normal text
• Minimum required: 3:1 for large text

Keyboard Navigation

No interactive elements, so no keyboard navigation needed.

Related Components

TituloDetalle

Title component used above description

TarjetasContenido

Content cards used below description