Casy.js

PopUpCard

X

Looky there...

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas doloribus perspiciatis quidem nesciunt hic libero incidunt vero iusto dolor!

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
  /* ---- CSS Variables Section ----- */
  --brdr-color: #c8c8c8;
  --brdr-width: 1px;
  --brdr-radius: 5px;
  --shadow-opacity: 0.15;
  --trans-speed: 500ms;
  --cubic-curve: cubic-bezier(0.27, 0.9, 0.52, 0.99);
  --pop-distance: 12px;
  /* -------------------------------- */
  overflow: hidden;
  background: white;
  width: calc(225px + (312 - 225) * (100vw - 320px) / (750 - 320));
  height: 370px;
  border: var(--brdr-width) solid var(--brdr-color);
  border-radius: var(--brdr-radius);
  transition: all var(--trans-speed);
  transition: all var(--trans-speed) var(--cubic-curve);

  &:hover {
    transform: translateY(calc(var(--pop-distance) * -1));
    box-shadow: 0 var(--pop-distance) 28px rgba(0, 0, 0, var(--shadow-opacity));
  }
`;

const ImageHalf = styled.div`
  border-bottom: var(--brdr-width) solid var(--brdr-color);
  width: 100%;
  height: 50%;

  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }
`;

const TextHalf = styled.div`
  width: 100%;
  height: 50%;

  & > * {
    margin: 15px;
  }
`;

const Heading = styled.h2`
  font-size: calc(28px + (30 - 28) * (100vw - 320px) / (750 - 320));
`;

const Paragraph = styled.p`
  font-size: calc(13px + (13 - 13) * (100vw - 320px) / (750 - 320));
`;

const PopUpCard = props => {
  return (
    <Wrapper>
      <ImageHalf>
        <img src={props.src} alt={props.alt} />
      </ImageHalf>
      <TextHalf>
        <Heading>{props.heading}</Heading>
        <Paragraph>{props.paragraph}</Paragraph>
      </TextHalf>
    </Wrapper>
  );
};

export default PopUpCard;

✂️

Usage

Example usage of component with props


<PopUpCard
  src="https://images.unsplash.com/photo-1505773170783-58f82a520465?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e3288093a41bb48f021aac5c157d41af&auto=format&fit=crop&w=2100&q=80"
  alt="PlaceHolder"
  heading="Looky there..."
  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
            doloribus perspiciatis quidem nesciunt hic libero incidunt vero iusto
            dolor!"
/>;

X

HalfFullCard

X

№ 923

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Quia cum, corrupti assumenda autem fugiat nisi illo officia porro sint sunt fugit sed quas, quasi harum deserunt, suscipit consectetur repudiandae architecto!

↠

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
  /* ---- CSS Variables Section ----- */
  --trans-speed: 600ms;
  --cubic-curve: cubic-bezier(0.43, -0.06, 0, 1.07);
  --pri-color: #9dc9f3;
  --brdr-width: 55%;
  --arrow-size: 40px;
  /* -------------------------------- */
  padding: 20px;
  max-width: calc(200px + (320 - 200) * (100vw - 320px) / (750 - 320));
  position: relative;
  z-index: 2;

  &::before {
    border: 6px solid var(--pri-color);
    background: transparent;
    content: '';
    position: absolute;
    width: var(--brdr-width);
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transition: background-color var(--trans-speed) var(--cubic-curve),
      width var(--trans-speed) var(--cubic-curve);
  }

  &:hover::before {
    background: var(--pri-color);
    width: 100%;
  }
`;

const MainHeading = styled.h2`
  font-size: calc(40px + (53 - 40) * (100vw - 320px) / (750 - 320));
  margin: 15px 0 25px;
`;

const SubHeading = styled.h3`
  font-size: calc(21px + (25 - 21) * (100vw - 320px) / (750 - 320));
  margin: 15px 0;
`;

const Content = styled.p`
  font-size: calc(12px + (14 - 12) * (100vw - 320px) / (750 - 320));
  line-height: 1.6;
  margin-bottom: 15px;
`;

const RightArrow = styled.span`
  display: block;
  margin: 0;
  padding: 0;
  transform: translate(calc(var(--brdr-width) - var(--arrow-size)));
  font-size: var(--arrow-size);
  transition: transform var(--trans-speed) var(--cubic-curve);

  ${Wrapper}:hover & {
    transform: translate(calc(100% - var(--arrow-size)));
  }
`;

const HalfFullCard = props => {
  return (
    <Wrapper>
      <MainHeading>{props.mainHeading}</MainHeading>
      <SubHeading>{props.subHeading}</SubHeading>
      <Content>{props.content}</Content>
      <div>
        <RightArrow>&#x021A0;</RightArrow>
      </div>
    </Wrapper>
  );
};

export default HalfFullCard;

✂️

Usage

Example usage of component with props


<HalfFullCard
  mainHeading="&#x02116; 923"
  subHeading="Lorem ipsum dolor sit amet consectetur adipisicing elit."
  content="Quia cum, corrupti assumenda autem fugiat nisi illo officia porro sint
            sunt fugit sed quas, quasi harum deserunt, suscipit consectetur
            repudiandae architecto!"
/>;

X

PopOutCard

X

⪘

YOU DO

THE MATH

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
  /* ---- CSS Variables Section ----- */
  --cp-sec-color: #444;
  --cp-pri-color: #c2956e;
  /* -------------------------------- */
  width: calc(230px + (255 - 230) * (100vmin - 320px) / (750 - 320));
  height: calc(230px + (255 - 230) * (100vmin - 320px) / (750 - 320));
  padding: 30px 20px 70px;
  background: #efefef;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 900ms cubic-bezier(0.075, 0.82, 0.165, 1);

  &:hover {
    transform: scale(1.06);
  }
`;

const Icon = styled.i`
  color: var(--cp-pri-color);
  font-size: calc(50px + (60 - 50) * (100vmin - 320px) / (750 - 320));
  margin-top: 35px;
`;

const HeadingOne = styled.h3`
  color: var(--cp-pri-color);
  font-size: calc(25px + (28 - 25) * (100vmin - 320px) / (750 - 320));
  font-weight: normal;
  margin: 15px;
  padding-bottom: 20px;
  border-bottom: 2px solid #cfcfcf;
`;

const HeadingTwo = styled.h2`
  letter-spacing: 4px;
  margin: 12px;
  font-weight: bold;
  font-size: calc(20px + (22 - 20) * (100vmin - 320px) / (750 - 320));
  color: var(--cp-pri-color);
  white-space: nowrap;
`;

const MirroredHeading = HeadingTwo.extend`
  color: var(--cp-sec-color);
  margin-top: -28px;
  font-weight: bold;
  letter-spacing: 6px;
`;

const PopOutCard = props => {
  return (
    <Wrapper>
      <Icon>{props.icon}</Icon>
      <HeadingOne>{props.headingOne}</HeadingOne>
      <HeadingTwo>{props.headingTwo}</HeadingTwo>
      <MirroredHeading>{props.headingTwo}</MirroredHeading>
    </Wrapper>
  );
};

export default PopOutCard;

✂️

Usage

Example usage of component with props


<PopOutCard icon="⪘" headingOne="YOU DO" headingTwo="THE MATH" />;