Skip to main content

​
Overview

The TarjetasContenido component is a reusable card container that displays titled content with a custom scrollbar. It’s used throughout the project detail pages to organize information like team members, materials lists, and conclusions.

​
Props

​
titulo
string
required
The card title displayed at the top
​
contenido
ReactNode
required
The content to display inside the card (can be text, JSX, or components)

​
Usage

The component is used extensively in ProyectoDetalle.jsx to display project information:
src/pages/ProyectoDetalle.jsx
import TarjetasContenido from "../components/TarjetasContenido";

<TarjetasContenido
  titulo="Integrantes"
  contenido={
    proyectoData.integrantes?.map((nombre, i) => (
      <div key={i}>
        <Badge>{i + 1}</Badge>
        <span>{nombre}</span>
      </div>
    ))
  }
/>

<TarjetasContenido
  titulo="🧪 Materiales"
  contenido={
    <ul>
      {proyectoData.materiales.map((mat, i) => (
        <li key={i}>
          {mat.nombre} — <strong>{mat.cantidad}</strong>
        </li>
      ))}
    </ul>
  }
/>

<TarjetasContenido
  titulo={<><Foco /> Conclusiones</>}
  contenido={
    <p>{proyectoData.conclusion}</p>
  }
/>

​
Component Structure

src/components/TarjetasContenido.jsx
import styled from "styled-components";
import { Card, CardContent } from "@mui/material";

const ScrollBox = styled.div`
  max-height: 150px;
  overflow-y: auto;
  padding-right: 10px;
  flex-grow: 1;
  
  &::-webkit-scrollbar {
    width: 0.8rem;
  }
  &::-webkit-scrollbar-track {
    background: rgba(33, 25, 81, 0.5);
    border-radius: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background: #15f5ba;
    border-radius: 4px;
    border: 1px solid #211951;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #836fff;
  }
`;

function TarjetasContenido({ titulo, contenido }) {
  return (
    <Card
      sx={{
        backgroundColor: "#2d1f6e",
        flex: 1,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <CardContent sx={{ flex: 1, display: "flex", flexDirection: "column" }}>
        <h2 style={{ color: "#15F5BA" }}>{titulo}</h2>
        <ScrollBox>{contenido}</ScrollBox>
      </CardContent>
    </Card>
  );
}

​
Key Features

​
Custom Scrollbar

The ScrollBox styled component provides a themed scrollbar:
ElementStyle
Width0.8rem (12.8px)
TrackDark purple with transparency
ThumbCyan (#15f5ba)
Thumb hoverPurple (#836fff)
Border radius4px (rounded)

​
Scrollable Content

Content is limited to 150px max height with automatic scrolling: 
max-height: 150px;
overflow-y: auto;
This ensures cards remain compact even with lengthy content.

​
Flexible Layout

Uses flexbox for responsive sizing: 
flex: 1,
display: "flex",
flexDirection: "column",

​
Visual Design

​
Colors

  • Card background: #2d1f6e (deep purple)
  • Title color: #15F5BA (cyan accent)
  • Content: Inherits from parent or white

​
Typography

Title uses <h2> tag with cyan color for hierarchy and brand consistency.

​
Common Use Cases

​
Team Members List

<TarjetasContenido
  titulo="Integrantes"
  contenido={
    <>
      {members.map((name, i) => (
        <div key={i}>
          {i + 1}. {name}
        </div>
      ))}
    </>
  }
/>

​
Materials Checklist

<TarjetasContenido
  titulo="🧪 Materiales"
  contenido={
    <ul style={{ paddingLeft: "20px" }}>
      {materials.map((item, i) => (
        <li key={i}>
          {item.nombre} — <strong>{item.cantidad}</strong>
        </li>
      ))}
    </ul>
  }
/>

​
Text Content

<TarjetasContenido
  titulo="Conclusiones"
  contenido={
    <p style={{ color: "#F0F3FF", marginTop: "10px" }}>
      {conclusionText}
    </p>
  }
/>

​
Title with Icon

import Foco from "@mui/icons-material/TipsAndUpdates";

<TarjetasContenido
  titulo={
    <>
      <Foco style={{ color: "yellow", marginRight: "10px" }} />
      Conclusiones
    </>
  }
  contenido={content}
/>

​
Styling the Scrollbar

​
Color Themes

// Green theme
&::-webkit-scrollbar-thumb {
  background: #00C853;
}
&::-webkit-scrollbar-thumb:hover {
  background: #00E676;
}

// Red theme
&::-webkit-scrollbar-thumb {
  background: #FF5252;
}
&::-webkit-scrollbar-thumb:hover {
  background: #FF1744;
}

​
Scrollbar Size

// Thinner scrollbar
&::-webkit-scrollbar {
  width: 0.5rem;
}

// Wider scrollbar
&::-webkit-scrollbar {
  width: 1rem;
}

​
Content Height

// Taller card
max-height: 250px;

// Shorter card
max-height: 100px;

// No scroll (full height)
max-height: none;
overflow-y: visible;

​
Browser Compatibility

The custom scrollbar uses ::-webkit-scrollbar pseudo-elements, which work in Chrome, Edge, Safari, and Opera. Firefox uses different syntax for scrollbar styling.
For Firefox support, add: 
scrollbar-width: thin;
scrollbar-color: #15f5ba rgba(33, 25, 81, 0.5);

​
Accessibility

Ensure sufficient color contrast between scrollbar and background. The current design (cyan on dark purple) provides good visibility.
Keyboard navigation works automatically - users can Tab to the scrollable area and use arrow keys or Page Up/Down.

TituloDetalle

Page title component

DescripcionDetalle

Description card component

Build docs developers (and LLMs) love

Get started for freeTalk to us