Card

Card is a component that provides default border and padding values. It also contains Card-split which lets you divide cards up into several sections effortlessly.

Nothing special on first glance

It just provides default padding and border values so you can create cards easily.

<div class="Card">...</div>

Card content

But when you need advanced cards…

You can use Card-split which lets you create cards that can easily be divided into multiple sections.

<div class="Card-split">
  <div>One</div>
  <div>Two</div>
</div>

One

Two

Include Dividers with ease too

Card-split works flawlessly with Divider and DividerBetween to create dividers as you wish.

<div class="Card-split DividerBetween-horizontal">
  <div>One</div>
  <div>Two</div>
</div>

Just one divider here

One

Two

Make complex cards just by writing some markup

We hope you never have to make monstrous cards, but if you ever need to, just know that it’s pretty easy.

Card-split and DividerBetween goes a long way to make almost any card you can imagine.

<div class="Card-split Vertical DividerBetween-x">
  <div>One</div>
  <div class="Card-split SimpleGrid [--cols:2] DividerBetween-y">
    <div>Two</div>
    <div class="Card-split DividerBetween-x">
      <div>Three</div>
      <div>Four</div>
    </div>
  </div>
  <div>Five</div>
</div>

You could go nuts if you want to 😵‍💫

One

Two

Three

Four

Five

Uniform padding and border inside Card-split

Keeping padding and border styles consistent is a cinch if you change the --padding and border variables we provide. Just check this demo out!

<div
  class="Card-split ..."
  style="--padding: <value>; --border-width: <value>"
>
  ...
</div>

Padding

1rem

Border Width

1px

One

Two

Three

Four

Five

Automatic nested border radius too

--nudge inside Card-split also creates automatic nested border radius calculation. So you can get beautiful cards with much less work.

<div class="Card-split" style="--radius: 1rem">
  <div style="--nudge: 0.25rem">One</div>
  <div>Two</div>
</div>

Magnificento

One

Two

Basic Usage

Card lets you create a component with default values for padding and border.

<div class="Card">Card Component</div>

Changing default variables

All Cards use the following CSS variables. We recommend changing them globally in the :root to ensure all cards have a consistent look and feel.

:root {
  --padding: 1rem;
  --border-width: 1px;
  --border-style: solid;
  --border-color: black;
  --radius: 0.5rem;
}

:root {
  --border-width: 2px;
  --border-color: gray;
  --radius: 3rem;
}

Note

Dividers use the same --border-width, --border-style and --border-color variables as well. We keep variables consistent for easier styling across components.

Advanced Cards with Card-split

A basic Card is insufficient if you want to create Cards that are sectioned with different backgrounds, mostly because you need to…

remove padding from Card
remove any gaps you may be using
add the padding to all elements within it
add overflow-hidden to prevent item backgrounds from leaking out of the card …

And that’s lot of work 💦. So we made things simpler with Card-split which does all of the above for you.

<div class="Card Vertical overflow-hidden p-0 gap-0">
  <div class="bg-red p-4"> One </div>
  <div class="Divider-horizontal"></div>
  <div class="p-4"> Two </div>
</div>

<div class="Card-split Vertical">
  <div class="bg-red">One</div>
  <div class="Divider-horizontal"></div>
  <div>Two</div>
</div>

Horizontal Sections

If you want cards to be divided horizontally, you can use Horizontal class. You can even add an (optional) Divider.

<div class="Card-split Horizontal">
  <div class="Vertical">One</div>
  <div class="Divider-vertical"></div>
  <div>Two</div>
</div>

Equidistance horizontal sections

If you want your card items to be split exactly in half, you can use SimpleGrid. (Nobody says you can’t use macro layout tools within a component!).

If you want to add a divider in this case, you should use DividerBetween instead of Divider. (Because Divider includes an extra element which screws up --cols while DividerBetween doesn’t).

<div class="Card-split SimpleGrid [--cols:2] DividerBetween-vertical">
  <div class="bg-cPink-900">One</div>
  <div>Two</div>
</div>

Vertical Sections

Likewise, you can also use DividerBetween to split card items vertically without adding extra Dividers.

<div class="Card-split Vertical DividerBetween-horizontal">
  <div class="bg-cPink-900">One</div>
  <div>Two</div>
  <div class="bg-cPink-900">Three</div>
  <div>Four</div>
  <div class="bg-cPink-900">Five</div>
</div>

Complex Cards

Occassionally, you may be tasked with complex cards that contain both Horizontal and Vertical dividers.

Although I sincerely hope you don’t have to create such a montrosity, I still want to let you know you can accomplish it with a mix of the techniques we mentioned above.

<div class="Card-split Vertical DividerBetween-x CardDemo FrameContentItem">
  <div>One</div>
  <div class="Card-split SimpleGrid [--cols:2] DividerBetween-y">
    <div> Two</div>
    <div class="Card-split DividerBetween-x">
      <div>Three</div>
      <div>Four</div>
    </div>
  </div>
  <div>Five</div>
</div>

Changing Internal Padding and Border

If you change the CSS variables mentioned above, you can change the padding and border values used for Card, Card-split, Divider and DividerBetween — even for complex cards — because they share the same values.

<!-- ... here means same as above example -->
<div class="... [--border-width:3px] [--padding:1.5rem]">
  ...
</div>

Nudging and nested radius

Card-split calculates nested border radius for children elements if you provide it with --radius and --nudge.

--radius: Defines the border-radius of the Card element
--nudge: Defines the amount of margins created around the child element

<div class="Card-split [--radius:1rem]">
  <div class="[--nudge:0.25rem]">One</div>
  <div>Two</div>
</div>

Custom Nested Radius

If you want to provide custom nested radius for the item, simply choose not to use --nudge. Do note that you will need to provide a border-radius declaration with a higher specificity to do so.

<div class="Card-split [--radius:1rem]">
  <div class="m-1 !rounded-3">One</div>
  <div>Two</div>
</div>

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Here’s the CSS for Card and Card-split.

The astro-island and astro-slot selectors help to alleviate styling frustrations when using Astro.

.Box,
.Card,
.Card-split {
  padding: var(--padding, 1rem);
  border: var(--border-width) var(--border-style) var(--border-color);
  border-radius: var(--radius);
}

.Card-split {
  overflow: hidden;
  gap: 0;
  padding: 0;

  > *,
  :where(astro-slot, astro-island) > * {
    margin: var(--nudge, 0);
    padding: var(--padding, 1rem);
    border-radius: calc(var(--radius) - var(--nudge));
  }

  > :where(.Card-split) {
    overflow: hidden;
    gap: 0;
    padding: 0;
  }

  &:where(.DivideBetween-x, .DivideBetween-horizontal) > :where(.Card-split) {
    border-width: 0;
    border-top-width: var(--border-width);
  }

  &:where(.DivideBetween-y, .DivideBetween-vertical) > :where(.Card-split) {
    border-width: 0;
    border-left-width: var(--border-width);
  }
}

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Card

Aliases

Class	Description
`Box`	Alias of `Card`

Modifiers

Class	Description
`Card-split`	Creates a card that can be split into multiple sections.

CSS Variables

Variable	Default	Description
`--padding`	`1rem`	Padding
`--border-width`	`1px`	Border width
`--border-style`	`solid`	Border style
`--border-color`	`black`	Border colour
`--radius`	`0.5rem`	Border radius

Card Split Children

CSS Variables

Variable	Default	Description
`--nudge`	`1rem`	Amount to push towards the center of the card on both block and inline axis

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Overflow Hidden

Cards have the overflow: hidden property to prevent backgrounds of children elements from leaking out of the border radius area.

Overflow hidden

No overflow hidden

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.