v0.9.9defuss-shadcn
Theme
Design your own

defuss-shadcn / Website / Events & Promotions / event-header

Built with: CSS

Event HeaderBLK

Introduces an event with its title, date, venue, and primary action - on a gradient band, over a cover picture, or beside a poster. Part of the Events & Promotions blocks.

On this page (4)
Component Skill — components/event-header/component-skill.md

Native basis

A <header>: badges (type, edition), the title, a tagline, the date range as <time>s, the venue in an <address>, a register Button and an "Add to calendar" link to an .ics file.

Built from

Badge, Button, Avatar.

Web Platform APIs

<time><address>downloadContainer queriescolor-mix()

Classes

.mk-event-header.mk-event-header-inner.mk-event-header-copy.mk-event-header-badges.mk-event-header-title.mk-event-header-tagline.mk-event-header-meta.mk-event-header-actions.mk-event-header-speakers.mk-event-header-poster.mk-event-header-cover

Data attributes

data-variant: image, split.

§Default

A gradient band in the chart colors: badges, title, tagline, the date range (<time>), the venue (<address>), register and an .ics "Add to calendar" download - and the speakers as an Avatar group.

§Over a cover

data-variant='image': the header over a cover picture (.mk-event-header-cover) with a scrim - white text.

§With a poster

data-variant='split': the copy beside a tilted poster from 48rem.

§CSS view file

/* -- Event Header (website · Events & Promotions) -------------------------
   Introduces an event with its title, date, venue, and primary action - on a gradient band, over a cover picture, or beside a poster. */
@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-event-header, .mk-event-header *, .mk-event-header ::before, .mk-event-header ::after) {
    box-sizing: border-box;
  }
  .mk-event-header {
    container: mk-event-header / inline-size;
    width: 100%;
  }
  .mk-event-header-inner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: 2rem;
    align-items: center;
    padding: 3rem 2rem;
    border-radius: var(--radius-xl);
    background:
      radial-gradient(60% 90% at 100% 0%, color-mix(in oklch, var(--chart-2) 30%, transparent), transparent 70%),
      radial-gradient(50% 80% at 0% 100%, color-mix(in oklch, var(--chart-1) 28%, transparent), transparent 70%),
      var(--muted);
  }
  .mk-event-header-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .mk-event-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .mk-event-header-title {
    margin: 0;
    font-size: clamp(2.25rem, 6cqi, 4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    text-wrap: balance;
  }
  .mk-event-header-tagline {
    margin: 0;
    max-width: 36rem;
    font-size: 1.125rem;
    color: color-mix(in oklch, currentColor 75%, transparent);
    text-wrap: pretty;
  }
  .mk-event-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    font-weight: 500;
    & li {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    & svg {
      width: 1.125rem;
      height: 1.125rem;
      opacity: 0.75;
    }
    & address {
      font-style: normal;
    }
  }
  .mk-event-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .mk-event-header-speakers {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: color-mix(in oklch, currentColor 75%, transparent);
  }
  .mk-event-header-poster {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    rotate: 2deg;
    & img {
      display: block;
      width: 100%;
      aspect-ratio: 3 / 4;
      object-fit: cover;
    }
  }
  .mk-event-header-cover {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mk-event-header[data-variant="image"] .mk-event-header-inner {
    padding-block: 5rem 3rem;
    background: transparent;
    color: #fff;
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(to top, oklch(0.12 0.02 260 / 0.9), oklch(0.12 0.02 260 / 0.25));
    }
    & .btn[data-variant="outline"] {
      border-color: oklch(1 0 0 / 0.45);
      background: transparent;
      color: inherit;
    }
  }
  @container mk-event-header (min-width: 48rem) {
    .mk-event-header[data-variant="split"] .mk-event-header-inner {
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
      gap: 3rem;
      padding: 3rem;
    }
  }
  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-event-header-inner {
      border: 1px solid CanvasText;
    }
  }
}

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