company logo

Before you start

Components List

Navigation

Data Display

Forms

Creating a basic Card Layout with HTML and CSS

What you'll learn

  • How to use flexbox to create the basic layout

Prerequisites

  • Basic HTML and CSS

React verison coming soon!

The Code

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Static Site</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
       <div class="card-cont">
          <!-- Image-->
          <img src="https://picsum.photos/300/200" />
  
          <!-- Information container -->
          <div class="info-cont">
              <!-- Intro Container -->
              <div>
                  <p class="title">Title goes here</p>
                  <p class="text">Secondary Text</p>
              </div>
              <p class="text">Here is some supporting text, I am talking a lot about supporting different things!</p>
              <button>Click me!</button>
          </div>
      </div>
    </body>
    </html>
Open on CodeSandboxOpen Sandbox

* If the component preview isn't loading, try refreshing the page.

* You can adjust the size of the code preview and code by draging the sides!

Explanation

HTML

  • Our HTML is very simple, we create a few containers for everything in our layout. Remember, think of everything in boxes, it will help you understand why we group some things together.
  • Our outermost div is our card container, where our card information will live. Within, we have an image and a container for all of the info on our card. This container will be a flex container with three children elements: our intro, supporting text, and our button. Let's get to styling.
  • The image I am using is from a site called Lorem Picsum, they let you reference their URL to show an image of any dimension(which you can change in the URL)

CSS

  • We will first reset all default styles in our document, by selecting everything with the universal selector. With this selected, we will set the margin and padding to 0, to have fewer problems with our overall layout.
  • First, let's style our card container, we give it a max width, some border radius, and a box shadow to stand out.
  • We need our image to span the entire width of our container, so we make its width 100%, adding some radius to make it fit in.
  • Finally, we'll make our info container a flexbox one, giving it some spacing, alignment, ect. We also style our headings and paragraphs to make our typography a bit more readable

Javascript

  • No JS required!

Resources

Made by Sam Kotecha

linkedin logo