Created Card component

This commit is contained in:
Camerin Figueroa 2021-09-20 15:12:31 -04:00
parent 74121fda81
commit 659aff38d0
2 changed files with 53 additions and 0 deletions

19
src/components/Card.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import './css/Card.css';
const Card = (props) => {
console.log(props);
return (
<div className="card">
<div>
<div className="title">{props.title}</div>
<div className="content">
{props.children}
</div>
</div>
<img className={props.image ? "show" : ""} src={props.image} alt={props.title}/>
</div>
);
};
export default Card;

View File

@ -0,0 +1,34 @@
.card {
display: flex;
flex-direction: row;
padding: 50px;
width: 75vw;
margin-left: auto;
margin-right: auto;
}
.card .title {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 48px;
color: #3D3D3D;
}
.card .content {
font-size:xx-large;
margin-right: 10px;
}
.card img {
display: none;
}
.card img.show {
display: block;
border-style: solid;
border-width: 2px;
border-color: #A5B2A4;
border-radius: 5px;
height: 10rem;
width: 10rem;
margin: auto;
}