Oxygen 6 Simple Fancy Card Layout + Design Tutorial [Video 27:00]

Also featured on: YouTube

Welcome back to another Oxygen 6 design video. In this video, we’re going to have ‘a little bit of fun’ creating a cool and fancy grid card layout and design! Let’s dive right into it.

OK so before we start, let me explain what a fancy card layout is.

In general web design, a fancy card layout is essentially an upgraded version of a standard card UI—where each piece of content (like a blog post, feature, or product) is presented in its own container, but with more visual polish and interaction.

So, instead of plain boxes, fancy cards usually include things like layered shadows, subtle gradients, hover animations, images, icons, and refined spacing. The goal here is to make each card feel more engaging and “designed,” rather than just functional or accessibility friendly.

Here’s what you’ll often see:

• Smooth hover effects (lift, scale, glow, or whatever takes your fancy)
• Depth using shadows or glassmorphism, which can look very fancy.
• Clean typography with strong hierarchy.
• Image + text combinations
• Consistent spacing and alignment across a grid

In short, it’s about taking a simple card layout and elevating it with modern UI styling so it looks more premium, interactive, and visually appealing without sacrificing usability.

Right then, now we have that covered, let’s create something special using Oxygen 6. We’ll use a combination of visual design with some custom CSS.

Class names and structure

.section .fancy-cards {..} /* First one is a generic pre-styled selector */
   .fancy-cards__container .column-3 {..}
      .fancy-cards__card {..}
         .fancy-cards__image {..}
         .heading {..}
         .text--light {..}
         .btn .btn--primary {..} /* HTML element */
CSS Element /* For styling buttons */

CSS used to style the buttons in this tutorial

Please note that the CSS below uses custom variables for styling values. You can replace these with your own variables or use standard CSS values instead.

/* BUTTON STYLES */
.btn {
  border: none;
  font-weight: 700;
  padding: var(--space-2xs);
  border-radius: var(--radius-s);
}

.btn--primary {
  color: var(--text-button-dark);
  background: var(--primary);
  transition: .3s ease-in-out;
  &:hover {
    background: var(--primary-60);
  }
}

Video