CSS Card With 2 Columns and Scrollable Content

CSS Card With 2 Columns and Scrollable Content
Code Snippet:50/50 with scroll container
Author: Ryan Mulligan
Published: March 21, 2024
Last Updated: March 21, 2024
Downloads: 259
License: MIT
Edit Code online: View on CodePen
Read More

This code creates a CSS card with 2 columns and scrollable content. It styles HTML elements for a modern layout. The CSS code implements a gradient background and responsive design. The HTML structure includes sections for introductory and detailed content, with a scrollable area for lengthy text. The card is helpful for displaying organized information with a sleek design.

How to Create CSS Card With 2 Columns and Scrollable Content

1. First of all, load the Reset CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

2. Set up the HTML structure. We’ll create an <article> element with a class of “container” to contain our card. Inside this container, we’ll have two <section> elements: one for the introductory content and another for the detailed content. The detailed content section will include a scrollable area for lengthy text.

<article class="container">
  <section class="intro flow">
    <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h2>
    <p>Et laborum, inventore provident ipsam ex, dignissimos perspiciatis, suscipit sed ullam sequi repudiandae esse vitae. Pariatur debitis ipsum consectetur. Ut, voluptas necessitatibus.</p>
    <button>Learn more</button>
  </section>
  <section class="details">
    <header>Header</header>
    <div class="scroll-container">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam cupiditate explicabo autem voluptatem natus fuga, iste, dicta consectetur qui commodi nemo, quisquam minima doloremque aliquam reiciendis at dolorum eius esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui excepturi accusantium, voluptatem dolorem maiores possimus deleniti rerum adipisci iusto nobis consequatur reiciendis. Alias ipsa modi, ducimus esse molestiae nihil facilis? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum natus libero amet? Alias autem ab commodi iusto enim. Unde eum asperiores nobis odio voluptate, enim culpa sit! Reprehenderit, soluta? Provident. Lorem ipsum dolor sit amet consectetur, adipisicing elit. A ducimus sunt consectetur quis ratione sapiente suscipit ullam aliquam inventore. Delectus eligendi numquam nisi at rem quia aliquam. Quaerat, magnam nemo! Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque fugit dolorem totam numquam culpa quo quos itaque similique in ratione incidunt recusandae perferendis dolore hic porro enim, obcaecati cumque ipsum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias amet atque delectus quia a labore, repellendus nemo inventore cumque fugit ea voluptas voluptates laborum! Praesentium, culpa qui! Ratione, maiores reprehenderit.
    </div>
    <footer>Footer</footer>
  </section>
</article>

3. Now, let’s add CSS styling to achieve the desired layout and design for our card.

* {
  box-sizing: border-box;
}


:root {
  color-scheme: light dark;

  --h: 330;
  --s: 88%;
  --l: 66%;
  --brand-color-bg: hsl(var(--h) var(--s) var(--l));
  --brand-color-fg: hsl(0 0% 99%);
  --border: 1px solid var(--brand-color-bg);
  --shadow-blur: 1.5rem;
  --shadow-color: hsla(var(--h) var(--s) var(--l) / 0.6);
  --shadow-y: 1rem;
  ---shadow-y: calc(var(--shadow-y) * -1);
  --space: clamp(1.125rem, 0.8rem + 1.3cqi, 1.875rem);
  --gradient: linear-gradient(
    165deg,
    transparent 50%,
    hsla(var(--h) var(--s) var(--l) / 0.15) 125%
  );
}

@media (prefers-color-scheme: dark) {
  :root {
    --l: 46%;
  }
}

html {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
  font-size: clamp(1rem, 0.6rem + 1.125cqi, 1.125rem);
  line-height: 1.5;
  padding: 2rem;
  min-height: 100%;
}

h2 {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

button {
  font: inherit;
  line-height: normal;
  padding: 0.5rem 1.5rem 0.6rem;
  background: var(--brand-color-bg);
  color: var(--brand-color-fg);
  border: unset;
  border-radius: 0.25rem;
}

button:active {
  translate: 0 1px;
}

.flow > * + * {
  -webkit-margin-before: var(--space);
          margin-block-start: var(--space);
}

.container {
  background: #fff;
  display: grid;
  grid-auto-rows: 1fr;
  border: var(--border);
  border-radius: 1rem;
  inline-size: min(55rem, 100%);
}

.intro {
  padding: var(--space);
  background-image: var(--gradient);
}

.details {
  display: grid;
  grid-template-rows: auto 1fr auto;
  -webkit-border-before: var(--border);
          border-block-start: var(--border);
}

.details :where(header, footer) {
  padding: calc(var(--space) / 2) var(--space);
  text-align: center;
  font-size: 0.8em;
  font-weight: 500;
  text-transform: uppercase;
  background-image: var(--gradient);
}

.scroll-container {
  contain: size;
  overflow-y: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  scrollbar-color: var(--brand-color-bg) transparent;
  padding: var(--space);
  border-block: var(--border);
  -webkit-animation: scroll-shadow-inset linear;
          animation: scroll-shadow-inset linear;
  animation-timeline: scroll(self);
}

@-webkit-keyframes scroll-shadow-inset {
  from {
    box-shadow: inset 0 var(---shadow-y) var(--shadow-blur) var(---shadow-y)
      var(--shadow-color);
  }

  to {
    box-shadow: inset 0 var(--shadow-y) var(--shadow-blur) var(---shadow-y)
      var(--shadow-color);
  }
}

@keyframes scroll-shadow-inset {
  from {
    box-shadow: inset 0 var(---shadow-y) var(--shadow-blur) var(---shadow-y)
      var(--shadow-color);
  }

  to {
    box-shadow: inset 0 var(--shadow-y) var(--shadow-blur) var(---shadow-y)
      var(--shadow-color);
  }
}

@media (min-width: 40rem) {
  .container {
    grid-template-columns: 1fr 1fr;
  }

  .details {
    -webkit-border-before: unset;
            border-block-start: unset;
    -webkit-border-start: var(--border);
            border-inline-start: var(--border);
  }
}

Finally, you can add your content within the <section> elements. The introductory section can include headings, text, and buttons, while the detailed section can contain more extensive content that requires scrolling.

That’s all! hopefully, you have successfully created a CSS card With 2 Columns on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X