How to create a teaser with styled-components and react

In my last article, I showed how to extend a button, modify it and use it anywhere on your app. In case you missed it, use the menu above and go to the previous article.

In this article, I will show you how to build a teaser from scratch, let's go!

Create the files

To give more structure to our code, we'll create two folders inside of each other:
components -> teaser
Inside the teaser folder, create a subfolder called teaser.js file.

Creating a basic component.

Inside the teaser.js create a basic component and export it.

import React from "react";

function Teaser() {
  return <div>teaser</div>;
}

export default Teaser;

Inside the file index.js, import the teaser and display it.

import styled from "styled-components";
import Teaser from "../src/components/teaser/teaser";

export const Box = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  width: 500px;
  gap: 20px;
  margin-top: 100px;
  align-items: center;
`;

export default function Home() {
  return (
    <Box>
      <Teaser />
    </Box>
  );
}

If you run the website you should see the word "teaser" on the home page in your browser.

Open the VScode terminal and type yarn dev and go to the following URL "http://localhost:3000" on your browser.

Building the teaser

To improve the readability of the code we will have our components separated from the styles files.
Inside the styles.js file import styled from style-components import styled from "styled-components";

Create two style components, called TeaserContainer and TextContainer.
Import both of them into the teaser.js file.

export const TeaserContainer = styled.div``;

and

export const TextContainer = styled.div``;

Instead of importing each styled component separately from the styles file, we can import all the components simultaneously with a single import.

import {TeaserContainer,TextContainer} from "./styles";

Call the styled components TeaserContainer and TextContainer inside our component change the basic component we created earlier to the code below.

function Teaser() {
  return (
    <TeaserContainer>
      <TextContainer>
       Placeholder text
      </TextContainer>
    </TeaserContainer>
  );
}

We won't see any changes yet as we just created the shell for our components, let's start styling it.

We will be using Grid (How to use grid) to positioning. The TeaserContainer will have this CSS

  display: grid;
  grid-template-columns: 1fr;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;

While in the TextContainer will have this CSS:

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;

Now you should see something like this on your browser.

Our teaser will have a title and descriptions as well, let's add it!

In the styles.js file creates another two styled components, one called "Title" that will extend an h2 and the other called "Description" that will extend a p tag.

Inside each new styled component, you can add the following styles.

export const Title = styled.h2`
  margin: 0;
  color: #5cc9e2;
`;

We won't add any styles in the description now, it will change later when we make it responsive.

export const Description = styled.p``;

Import the 2 newly created components above to the index.js file.

import {
  TeaserContainer,
  TextContainer,
  Title,
  Description,
} from "./styles";

Call each one inside our main component, as seen below, and change the title and the description for something that you want.

return (
    <TeaserContainer>
      <TextContainer>
        <Title>This is my first Teaser</Title>
        <Description>
          I just built this nice teaser dor the first time ;)
        </Description>
      </TextContainer>
    </TeaserContainer>
  );

Now we just need to add the image.

Adding Image

For the image, we will use the Image component from next.js, first we will import it.

import Image from "next/image";

Find an image that you would like to use and add it to the public folder, import it in the teaser.js file. I called my image city.jpeg.

import city from "../../../public/city.jpeg";

Next we call the component just above the TextContainer component.
<Image alt="city" src={city} layout="intrinsic" responsive />
What it is:
intrinsic: Scale down to fit width of container, up to image size.
Responsive: Scale to fit the width of the container

You can check out other next.js image properties here

That is it, we have our teaser.

Making the teaser responsive.

We are going to use media queries to work with the responsiveness of our teaser.

To make our teaser 50% image and 50% text we need to make the grid two columns and also add a gap so it does not stick together.

In the styled component TeaserContainer add the following just below the background: #fff;

 @media (min-width: 700px) {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

We are saying to the browser to render those two properties when the screen has a minimum width of 700px, so the browser will ignore those previous styles for the same two properties(If there is any) and will use the new ones set inside the media query.

You should see your image on the left-hand side and the text on the right-hand side.

And we are all done, we have a Teaser responsive for 2 breakpoints, one from 0 to 700px and another from 701px to infinite.

There are some tweaks we can do to make it better, like adding more breakpoints and adding a maximum height to the image, the latter is not recommended as it could break the teaser, for instance, if you have a long description.
There are some other technics that we can use to prevent this issue from happening but it is out of the scope of this article.

Tip:

I hope these articles can help you build your next app.

"This" is my teaser 😁

Have a great day 😉