Skip to main content

​
Overview

The FlipScienceCard component displays a science project preview in an interactive card format. It features:
  • Hover animations with glow effects and image scaling
  • Project title, description, and cover image
  • Action buttons for favorite and share functionality
  • “Ver más” (View More) button with gradient styling
  • Responsive design with Material-UI components
  • Color scheme matching the School Science brand (#15F5BA, #836FFF, #211951)

​
Props

​
title
string
required
The project title displayed in the card header
​
description
string
required
The project description. Automatically truncated to 3 lines with ellipsis overflow
​
image
string
required
URL or path to the project cover image. Displayed at 200px height with hover zoom effect
​
onFavorite
function
Callback function triggered when the favorite (heart) icon is clicked
​
onShare
function
Callback function triggered when the share icon is clicked
​
onViewMore
function
Callback function triggered when the “Ver más” button is clicked. Typically used for navigation to project details

​
Usage Example

Here’s how FlipScienceCard is used in the Home page to display all science projects: 
import FlipScienceCard from "../components/FlipScienceCard";
import { useNavigate } from "react-router-dom";
import proyectos from "../data/proyectos";

function App() {
  const navigate = useNavigate();
  
  return (
    <Container fixed>
      <GrupoCartas>
        {proyectos.map((p) => (
          <FlipScienceCard
            key={p.id}
            title={p.titulo}
            description={p.descripcion}
            image={p.imagenes[0]}
            onViewMore={() => navigate(`/proyecto/${p.id}`)}
          />
        ))}
      </GrupoCartas>
    </Container>
  );
}

​
Component Structure

The component consists of several layers:

​
1. Outer Box (Glow Container)

  • Fixed dimensions: 300px width × 420px height
  • Default glow: box-shadow: 0 0 18px rgba(21, 245, 186, 0.35)
  • Hover glow: box-shadow: 0 0 28px rgba(21, 245, 186, 0.6)
  • Hover lift: transform: translateY(-6px)

​
2. Card Component

  • Background: #0a192f (dark blue)
  • Border radius: 16px
  • Flex layout with space-between for vertical alignment

​
3. Image Section

  • CardMedia component with 200px height
  • Hover zoom: transform: scale(1.07)
  • Overlay appears on hover with #211951 background at 35% opacity

​
4. Content Section

  • Title: h5 variant, #15F5BA color, bold
  • Description: body2 variant, 3-line clamp with 60px fixed height

​
5. Action Buttons

  • “Ver más” button with gradient: linear-gradient(135deg, #15F5BA, #64ffda)
  • Hover gradient: linear-gradient(135deg, #836FFF, #15F5BA)
  • Icon buttons for favorite (pink) and share (cyan)

​
Styling Details

​
Color Palette

ElementColorHex Code
Card BackgroundDark Navy#0a192f
Primary AccentCyan#15F5BA
Secondary AccentPurple#836FFF
TextOff-white#F0F3FF
OverlayDeep Purple#211951
Favorite IconPink#ff6b81

​
Transitions

All interactive elements use smooth transitions: 
transition: "transform 0.3s ease, box-shadow 0.3s ease"

​
Customization Tips

Adjust the WebkitLineClamp value in the description Typography to show more or fewer lines:
WebkitLineClamp: 3, // Change to 4 or 5 for more content
The card dimensions (300×420px) are fixed. For responsive behavior, wrap multiple cards in a flex container with flex-wrap: wrap like the GrupoCartas component in Home.jsx.

​
Material-UI Components Used

  • Box - Container with hover effects
  • Card - Main card structure
  • CardContent - Content wrapper
  • CardMedia - Image display
  • Typography - Text elements
  • Button - “Ver más” action
  • IconButton - Favorite and share icons

​
Icons

import FavoriteIcon from "@mui/icons-material/Favorite";
import ShareIcon from "@mui/icons-material/Share";

Build docs developers (and LLMs) love

Get started for freeTalk to us