v0.9.9defuss-shadcn
Theme
Design your own

defuss-shadcn / Website / Account & States / coming-soon

Built with: CSS

Coming SoonBLK

Announces an upcoming launch and its expected availability - the date, a live rolling countdown, a notify-me form and where to follow along. Part of the Account & States blocks.

On this page (3)
Component Skill — components/coming-soon/component-skill.md

Native basis

A <section>: brand, an eyebrow with the date (<time>), a large title, a sentence, the Countdown component (.countdown-group[data-until] with primary .countdown-unit boxes - its digits roll every second), an email form and social links - on a soft gradient, or beside a picture.

Built from

Countdown, Input, Button.

Web Platform APIs

<time>Constraint validationContainer queries

Classes

.mk-coming-soon.mk-coming-soon-layout.mk-coming-soon-copy.mk-coming-soon-eyebrow.mk-coming-soon-title.mk-coming-soon-text.mk-coming-soon-form.mk-coming-soon-timer.mk-coming-soon-social.mk-coming-soon-media

Data attributes

data-variant="image".

§Default

Centered on a soft gradient in the theme's chart colors: the date as <time> in the eyebrow, a big title, the Countdown component in primary boxes - days, hours, minutes and the seconds rolling - a notify form and social links.

§With a picture

data-variant='image': the copy start-aligned beside a picture from 48rem, with the same rolling Countdown.

§CSS view file

/* -- Coming Soon (website · Account & States) -----------------------------
   Announces an upcoming launch and its expected availability - the date, a live rolling countdown, a notify-me form and where to follow along. */
@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-coming-soon, .mk-coming-soon *, .mk-coming-soon ::before, .mk-coming-soon ::after) {
    box-sizing: border-box;
  }
  .mk-coming-soon {
    container: mk-coming-soon / inline-size;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background:
      radial-gradient(60% 70% at 20% 0%, color-mix(in oklab, var(--chart-1) 22%, transparent), transparent 70%),
      radial-gradient(60% 70% at 90% 100%, color-mix(in oklab, var(--chart-2) 20%, transparent), transparent 70%),
      var(--muted);
  }
  .mk-coming-soon-layout {
    display: grid;
  }
  .mk-coming-soon-copy {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    & > svg {
      width: 2rem;
      height: 2rem;
      color: var(--primary);
    }
  }
  .mk-coming-soon-eyebrow {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--background);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: var(--shadow-xs);
  }
  .mk-coming-soon-title {
    margin: 0;
    font-size: clamp(2.25rem, 7cqi, 4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    text-wrap: balance;
  }
  .mk-coming-soon-text {
    margin: 0;
    max-width: 32rem;
    color: var(--muted-foreground);
    font-size: 1.0625rem;
    text-wrap: pretty;
  }
  .mk-coming-soon-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 26rem;
    & .input {
      flex: 1 1 12rem;
      background: var(--background);
    }
  }
  .mk-coming-soon-timer {
    gap: 0.625rem;
    & .countdown-unit {
      min-width: 5rem;
      box-shadow: var(--shadow-lg);
    }
  }
  .mk-coming-soon-social {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    & a {
      display: grid;
      place-items: center;
      width: 2.25rem;
      height: 2.25rem;
      border-radius: var(--radius-md);
      color: var(--muted-foreground);
    }
    & a:hover {
      background: var(--background);
      color: var(--foreground);
    }
    & svg {
      width: 1.125rem;
      height: 1.125rem;
    }
  }
  .mk-coming-soon-media {
    display: none;
    margin: 0;
    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  @container mk-coming-soon (min-width: 48rem) {
    .mk-coming-soon[data-variant="image"] .mk-coming-soon-layout {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }
    .mk-coming-soon[data-variant="image"] .mk-coming-soon-copy {
      justify-items: start;
      text-align: start;
      padding: 3.5rem;
    }
    .mk-coming-soon[data-variant="image"] :is(.mk-coming-soon-form, .mk-coming-soon-timer) {
      justify-content: start;
    }
    .mk-coming-soon[data-variant="image"] .mk-coming-soon-media {
      display: block;
    }
    /* the copy column is narrow beside the picture: a compact timer stays on one row */
    .mk-coming-soon[data-variant="image"] .mk-coming-soon-timer {
      gap: 0.5rem;
    }
    .mk-coming-soon[data-variant="image"] .mk-coming-soon-timer .countdown-unit {
      min-width: 3.75rem;
      padding: 0.5rem 0.375rem;
    }
    .mk-coming-soon[data-variant="image"] .mk-coming-soon-timer .countdown {
      font-size: 1.75rem;
    }
  }
  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-coming-soon {
      border: 1px solid CanvasText;
    }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub