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 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.
TituloDetalle Title component used above description
TarjetasContenido Content cards used below description
