Skip to main content

​
Overview

The TituloDetalle component is a simple but visually striking h1 heading component used to display project titles on detail pages. It features custom styling with a glowing text shadow effect.

​
Props

​
children
ReactNode
required
The title text or content to display

​
Usage

Used at the top of project detail pages to display the project name:
src/pages/ProyectoDetalle.jsx
import TituloDetalle from "../components/TituloDetalle";

<TituloDetalle>{proyectoData.titulo}</TituloDetalle>
Example output: 
<TituloDetalle>Campana de Franklin Casera</TituloDetalle>
<TituloDetalle>Brazo Hidráulico Educativo</TituloDetalle>

​
Component Structure

src/components/TituloDetalle.jsx
function TituloDetalle({ children }) {
  return (
    <h1
      style={{
        textAlign: "center",
        fontSize: "2.5rem",
        fontWeight: "bold",
        color: "#15F5BA",
        textShadow: "0 0 20px rgba(21,245,186,0.5)",
        marginBottom: "20px",
      }}
    >
      {children}
    </h1>
  );
}

​
Styling Details

​
Typography

PropertyValuePurpose
fontSize2.5rem (40px)Large, prominent heading
fontWeightboldStrong visual hierarchy
textAligncenterCentered on page

​
Colors

  • Text color: #15F5BA (cyan accent from brand palette)
  • Text shadow: Glowing effect with 20px blur and 50% opacity

​
Spacing

  • marginBottom: 20px provides separation from content below

​
Visual Effects

​
Glow Effect

The text shadow creates a soft glow around the text: 
text-shadow: 0 0 20px rgba(21,245,186,0.5);
Breakdown:
  • 0 0: No horizontal or vertical offset (glow is centered)
  • 20px: Blur radius (how far the glow extends)
  • rgba(21,245,186,0.5): Cyan color at 50% opacity

​
Customization Examples

​
Stronger Glow

textShadow: "0 0 30px rgba(21,245,186,0.8)"

​
Multiple Shadows

textShadow: 
  "0 0 10px rgba(21,245,186,0.8), " +
  "0 0 20px rgba(21,245,186,0.5), " +
  "0 0 30px rgba(21,245,186,0.3)"

​
Different Color

color: "#836FFF",
textShadow: "0 0 20px rgba(131,111,255,0.5)"

​
Larger Size

fontSize: "3rem",  // 48px

​
Left-Aligned

textAlign: "left",

​
Responsive Design

For smaller screens, consider adjusting the font size: 
const TituloDetalle = ({ children }) => {
  return (
    <h1
      style={{
        textAlign: "center",
        fontSize: "clamp(1.75rem, 5vw, 2.5rem)",  // Responsive size
        fontWeight: "bold",
        color: "#15F5BA",
        textShadow: "0 0 20px rgba(21,245,186,0.5)",
        marginBottom: "20px",
      }}
    >
      {children}
    </h1>
  );
};
The clamp() function ensures:
  • Minimum: 1.75rem (28px) on small screens
  • Preferred: 5vw (scales with viewport)
  • Maximum: 2.5rem (40px) on large screens

​
Accessibility

Using a semantic <h1> tag is important for screen readers and SEO. This properly identifies the main heading of the page.
Only use one <h1> per page. For subheadings, create similar components using <h2>, <h3>, etc.

​
Browser Compatibility

The text-shadow property is supported in all modern browsers:
  • Chrome ✓
  • Firefox ✓
  • Safari ✓
  • Edge ✓
  • Opera ✓

​
Performance

Text shadows have minimal performance impact. The glow effect is rendered efficiently by the browser’s text rendering engine.

​
Usage in Context

Typical page structure: 
<TituloDetalle>{proyectoData.titulo}</TituloDetalle>
<DescripcionDetalle descripcion={proyectoData.descripcion} />
<ImageCarousel images={proyectoData.imagenes} />

DescripcionDetalle

Description component paired with title

TarjetasContenido

Content card for project information

Build docs developers (and LLMs) love

Get started for freeTalk to us