Music

Electric Party

Jeden Samstag um 22:00 Uhr

Content Box

Die Content Box ist ein flexibles Gestaltungselement, mit dem sich individuelle Inhalte frei zusammenstellen lassen. Durch den Einsatz von AFX-Markup können eigene Strukturen und Layouts erstellt werden – ideal für kreative oder spezialisierte Inhaltsbereiche.

Zusätzlich lassen sich Bilder, Dateien und Links integrieren, um Inhalte visuell oder funktional zu erweitern. Eine wählbare Hintergrundfarbe und einstellbare Breite ermöglichen eine harmonische Einbindung ins Seitendesign. Ein optionales Textfeld bietet Raum für ergänzende Hinweise oder Beschreibungen.

So entsteht eine vielseitige Inhaltsbox, die maximale Freiheit bei Gestaltung und Ausdruck bietet.

Bist du neugierig geworden und willst sehen, wie man so etwas einbauen kann? Voilà: Du kannst bequem in einem Editor mit Code-Completion dein Markup schreiben. Und keine Sorge: Falls du eine Tailwind CSS Klasse schreibst, du bisher noch nie verwendet wurde, fügt das System diese automatisch hinzu.

<div class="contentbox-container flex flex-col items-center justify-center">
  <svg class="absolute">
    <defs>
      <filter id="turbulent-displace" colorInterpolationFilters="sRGB" x="-20%" y="-20%" width="140%" height="140%">
        <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="10" result="noise1" seed="1" />
        <feOffset in="noise1" dx="0" dy="0" result="offsetNoise1">
          <animate attributeName="dy" values="700; 0" dur="6s" repeatCount="indefinite" calcMode="linear" />
        </feOffset>

        <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="10" result="noise2" seed="1" />
        <feOffset in="noise2" dx="0" dy="0" result="offsetNoise2">
          <animate attributeName="dy" values="0; -700" dur="6s" repeatCount="indefinite" calcMode="linear" />
        </feOffset>

        <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="10" result="noise1" seed="2" />
        <feOffset in="noise1" dx="0" dy="0" result="offsetNoise3">
          <animate attributeName="dx" values="490; 0" dur="6s" repeatCount="indefinite" calcMode="linear" />
        </feOffset>

        <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="10" result="noise2" seed="2" />
        <feOffset in="noise2" dx="0" dy="0" result="offsetNoise4">
          <animate attributeName="dx" values="0; -490" dur="6s" repeatCount="indefinite" calcMode="linear" />
        </feOffset>

        <feComposite in="offsetNoise1" in2="offsetNoise2" result="part1" />
        <feComposite in="offsetNoise3" in2="offsetNoise4" result="part2" />
        <feBlend in="part1" in2="part2" mode="color-dodge" result="combinedNoise" />

        <feDisplacementMap in="SourceGraphic" in2="combinedNoise" scale="30" xChannelSelector="R" yChannelSelector="B" />
      </filter>
    </defs>
  </svg>

  <div class="card-container relative p-0.5 rounded-3xl">
    <div class="relative">
      <div class="border-outer rounded-3xl pr-1 pb-1">
        <div class="main-card rounded-3xl"></div>
      </div>
      <div class="glow-layer-1 rounded-3xl absolute inset-0"></div>
      <div class="glow-layer-2 rounded-3xl absolute inset-0"></div>
    </div>

    <div class="overlay-1 rounded-3xl absolute inset-0"></div>
    <div class="overlay-2 rounded-3xl absolute inset-0"></div>
    <div class="background-glow rounded-3xl absolute inset-0"></div>

    <div class="absolute inset-0 flex flex-col">
      <div class="flex flex-col p-12 pb-4 h-full">
        <div class="scrollbar-glass">
          {props.label}
        </div>
        <p class="title">{props.title}</p>
      </div>

      <hr class="divider" />

      <div class="content-bottom">
        <p class="opacity-50">{props.description}</p>
      </div>
    </div>
  </div>
</div>
label: Music
title: Electric Party
description: Jeden Samstag um 22:00 Uhr
/* Main container */
.contentbox-container {
  --electric-border-color: #dd8448;
  --electric-light-color: oklch(from var(--electric-border-color) l c h);
  --gradient-color: oklch(
    from var(--electric-border-color) 0.3 calc(c / 2) h / 0.4
  );
  --color-neutral-900: oklch(0.185 0 0 / 0.6);
  color: oklch(0.985 0 0);
}

/* Card container */
.card-container {
  background: linear-gradient(
      -30deg,
      var(--gradient-color),
      transparent,
      var(--gradient-color)
    ),
    linear-gradient(
      to bottom,
      var(--color-neutral-900),
      var(--color-neutral-900)
    ),
    url() center no-repeat;
}

/* Border layers */
.border-outer {
  border: 2px solid rgba(221, 132, 72, 0.5)
}

.main-card {
  width: 350px;
  height: 500px;
  border: 2px solid var(--electric-border-color);
  margin-top: -4px;
  margin-left: -4px;
  filter: url(#turbulent-displace);
}

/* Glow effects */
.glow-layer-1 {
  border: 2px solid rgba(221, 132, 72, 0.6);
  filter: blur(1px);
}

.glow-layer-2 {
  border: 2px solid var(--electric-light-color);
  filter: blur(4px);
}

/* Overlay effects */
.overlay-1 {
  opacity: 1;
  mix-blend-mode: overlay;
  transform: scale(1.1);
  filter: blur(16px);
  background: linear-gradient(
    -30deg,
    white,
    transparent 30%,
    transparent 70%,
    white
  );
}

.overlay-2 {
  opacity: 0.5;
  mix-blend-mode: overlay;
  transform: scale(1.1);
  filter: blur(16px);
  background: linear-gradient(
    -30deg,
    white,
    transparent 30%,
    transparent 70%,
    white
  );
}

/* Background glow */
.background-glow {
  filter: blur(32px);
  transform: scale(1.1);
  opacity: 0.3;
  z-index: -1;
  background: linear-gradient(
    -30deg,
    var(--electric-light-color),
    transparent,
    var(--electric-border-color)
  );
}

.content-bottom {
  display: flex;
  flex-direction: column;
  padding: 48px;
  padding-top: 16px;
}

/* Scrollbar glass component */
.scrollbar-glass {
  background: radial-gradient(
      47.2% 50% at 50.39% 88.37%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    rgba(255, 255, 255, 0.04);
  position: relative;
  transition: background 0.3s ease;
  border-radius: 14px;
  width: fit-content;
  height: fit-content;
  padding: 8px 16px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.scrollbar-glass:hover {
  background: radial-gradient(
      47.2% 50% at 50.39% 88.37%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    rgba(255, 255, 255, 0.08);
}

.scrollbar-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.48) 16.73%,
    rgba(255, 255, 255, 0.08) 30.2%,
    rgba(255, 255, 255, 0.08) 68.2%,
    rgba(255, 255, 255, 0.6) 81.89%
  );
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
  pointer-events: none;
}

/* Typography */
.title {
  font-size: 36px;
  font-weight: 500;
  margin-top: auto;
}

/* Divider */
.divider {
  margin-top: auto;
  border: none;
  height: 1px;
  background-color: currentColor;
  opacity: 0.1;
  mask-image: linear-gradient(to right, transparent, black, transparent);
}