Komponenty UI Łatwy

Level Layout

Horizontal alignment layout that evenly spaces items or pushes them to edges with left, center, and right slots, stacking responsively on mobile.

Otwórz w Lab

css javascript svelte vue

Targety: TS JS HTML React Svelte Vue

Kod

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: #0a0a0a;
  color: #f2f6ff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.demo {
  width: 100%;
  max-width: 640px;
}

.demo-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.375rem;
}

.demo-sub {
  color: #475569;
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

.demo-section {
  margin-bottom: 1.5rem;
}

.demo-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.625rem;
}

/* ── Level ── */
.level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 0.75rem;
}

@media (max-width: 520px) {
  .level {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .level-left,
  .level-center,
  .level-right {
    justify-content: center;
  }
}

.level-left,
.level-center,
.level-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.level-left {
  justify-content: flex-start;
}
.level-center {
  justify-content: center;
}
.level-right {
  justify-content: flex-end;
}

/* ── Items evenly distributed ── */
.level--items {
  justify-content: space-around;
}

.level-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.level-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: #f2f6ff;
}

.level-stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #4a4a4a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Card variant ── */
.level--card {
  background: #141414;
  border: 1px solid #1e1e1e;
}

.level-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #f2f6ff;
}

/* ── Footer variant ── */
.level--footer {
  background: transparent;
  border: 1px solid #1a1a1a;
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
}

/* ── Elements ── */
.level-logo {
  font-size: 1rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: -0.02em;
}

.level-link {
  font-size: 0.8125rem;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.15s;
}

.level-link:hover {
  color: #f2f6ff;
}

.level-link--muted {
  color: #4a4a4a;
  font-size: 0.75rem;
}

.level-link--muted:hover {
  color: #94a3b8;
}

.level-muted {
  font-size: 0.8125rem;
  color: #4a4a4a;
}

.level-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border-radius: 999px;
}

.level-btn {
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.2);
  padding: 0.4rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s;
}

.level-btn:hover {
  background: rgba(56, 189, 248, 0.2);
}

.level-btn--sm {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
}

.level-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border-radius: 0.375rem;
}

.level-btn--danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
}

.level-btn--danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* Level Layout is a CSS flexbox pattern — no JavaScript required. */

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Level Layout</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <h1 class="demo-title">Level Layout</h1>
    <p class="demo-sub">Horizontal alignment with left/center/right slots.</p>

    <!-- Example 1: Navigation bar -->
    <div class="demo-section">
      <span class="demo-label">Navigation Bar</span>
      <div class="level">
        <div class="level-left">
          <span class="level-logo">Stealthis</span>
        </div>
        <div class="level-center">
          <a href="#" class="level-link">Home</a>
          <a href="#" class="level-link">Library</a>
          <a href="#" class="level-link">Docs</a>
        </div>
        <div class="level-right">
          <button class="level-btn">Sign In</button>
        </div>
      </div>
    </div>

    <!-- Example 2: Stats row -->
    <div class="demo-section">
      <span class="demo-label">Stats Row</span>
      <div class="level level--items">
        <div class="level-item">
          <span class="level-stat-value">128</span>
          <span class="level-stat-label">Components</span>
        </div>
        <div class="level-item">
          <span class="level-stat-value">2.4k</span>
          <span class="level-stat-label">Downloads</span>
        </div>
        <div class="level-item">
          <span class="level-stat-value">56</span>
          <span class="level-stat-label">Contributors</span>
        </div>
        <div class="level-item">
          <span class="level-stat-value">4.9</span>
          <span class="level-stat-label">Rating</span>
        </div>
      </div>
    </div>

    <!-- Example 3: Card header -->
    <div class="demo-section">
      <span class="demo-label">Card Header</span>
      <div class="level level--card">
        <div class="level-left">
          <h3 class="level-card-title">Recent Activity</h3>
        </div>
        <div class="level-right">
          <span class="level-badge">12 new</span>
          <button class="level-btn level-btn--sm">View All</button>
        </div>
      </div>
    </div>

    <!-- Example 4: Footer -->
    <div class="demo-section">
      <span class="demo-label">Footer</span>
      <div class="level level--footer">
        <div class="level-left">
          <span class="level-muted">&copy; 2026 Stealthis. All rights reserved.</span>
        </div>
        <div class="level-right">
          <a href="#" class="level-link level-link--muted">Privacy</a>
          <a href="#" class="level-link level-link--muted">Terms</a>
          <a href="#" class="level-link level-link--muted">Contact</a>
        </div>
      </div>
    </div>

    <!-- Example 5: Toolbar -->
    <div class="demo-section">
      <span class="demo-label">Toolbar</span>
      <div class="level level--card">
        <div class="level-left">
          <button class="level-btn level-btn--icon">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
          </button>
          <span class="level-muted">3 items selected</span>
        </div>
        <div class="level-right">
          <button class="level-btn level-btn--sm">Edit</button>
          <button class="level-btn level-btn--sm level-btn--danger">Delete</button>
        </div>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

import { ReactNode, CSSProperties } from "react";

interface LevelProps {
  left?: ReactNode;
  center?: ReactNode;
  right?: ReactNode;
  children?: ReactNode;
  style?: CSSProperties;
  variant?: "default" | "card" | "footer";
}

export function Level({ left, center, right, children, style, variant = "default" }: LevelProps) {
  const bg = variant === "footer" ? "transparent" : "#141414";
  const border = variant === "footer" ? "1px solid #1a1a1a" : "1px solid #1e1e1e";

  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: children ? "space-around" : "space-between",
        gap: "1rem",
        padding: variant === "footer" ? "0.625rem 1rem" : "0.75rem 1rem",
        background: bg,
        border,
        borderRadius: "0.75rem",
        ...style,
      }}
    >
      {children ? (
        children
      ) : (
        <>
          {left && (
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: "0.75rem",
                justifyContent: "flex-start",
              }}
            >
              {left}
            </div>
          )}
          {center && (
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: "0.75rem",
                justifyContent: "center",
              }}
            >
              {center}
            </div>
          )}
          {right && (
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: "0.75rem",
                justifyContent: "flex-end",
              }}
            >
              {right}
            </div>
          )}
        </>
      )}
    </div>
  );
}

interface LevelItemProps {
  value: string;
  label: string;
}

export function LevelItem({ value, label }: LevelItemProps) {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: "0.125rem",
      }}
    >
      <span style={{ fontSize: "1.25rem", fontWeight: 800, color: "#f2f6ff" }}>{value}</span>
      <span
        style={{
          fontSize: "0.6875rem",
          fontWeight: 500,
          color: "#4a4a4a",
          textTransform: "uppercase",
          letterSpacing: "0.05em",
        }}
      >
        {label}
      </span>
    </div>
  );
}

/* Demo */
export default function LevelLayoutDemo() {
  const linkStyle: CSSProperties = {
    fontSize: "0.8125rem",
    color: "#94a3b8",
    textDecoration: "none",
    cursor: "pointer",
  };

  const btnStyle: CSSProperties = {
    background: "rgba(56,189,248,0.1)",
    color: "#38bdf8",
    border: "1px solid rgba(56,189,248,0.2)",
    padding: "0.4rem 0.875rem",
    fontSize: "0.8125rem",
    fontWeight: 600,
    fontFamily: "inherit",
    borderRadius: "0.5rem",
    cursor: "pointer",
  };

  const btnSmStyle: CSSProperties = {
    ...btnStyle,
    padding: "0.25rem 0.625rem",
    fontSize: "0.75rem",
  };

  const badgeStyle: CSSProperties = {
    display: "inline-flex",
    alignItems: "center",
    padding: "0.2rem 0.625rem",
    fontSize: "0.6875rem",
    fontWeight: 600,
    color: "#38bdf8",
    background: "rgba(56,189,248,0.1)",
    borderRadius: "999px",
  };

  return (
    <div
      style={{
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: "#0a0a0a",
        fontFamily: "Inter, system-ui, sans-serif",
        color: "#f2f6ff",
        padding: "2rem",
      }}
    >
      <div
        style={{
          width: "100%",
          maxWidth: 640,
          display: "flex",
          flexDirection: "column",
          gap: "1.5rem",
        }}
      >
        <div>
          <h1 style={{ fontSize: "1.5rem", fontWeight: 800, marginBottom: "0.375rem" }}>
            Level Layout
          </h1>
          <p style={{ color: "#475569", fontSize: "0.875rem" }}>
            Horizontal alignment with left/center/right slots.
          </p>
        </div>

        <Section label="Navigation Bar">
          <Level
            left={
              <span
                style={{
                  fontSize: "1rem",
                  fontWeight: 800,
                  color: "#38bdf8",
                  letterSpacing: "-0.02em",
                }}
              >
                Stealthis
              </span>
            }
            center={
              <>
                <span style={linkStyle}>Home</span>
                <span style={linkStyle}>Library</span>
                <span style={linkStyle}>Docs</span>
              </>
            }
            right={<button style={btnStyle}>Sign In</button>}
          />
        </Section>

        <Section label="Stats Row">
          <Level>
            <LevelItem value="128" label="Components" />
            <LevelItem value="2.4k" label="Downloads" />
            <LevelItem value="56" label="Contributors" />
            <LevelItem value="4.9" label="Rating" />
          </Level>
        </Section>

        <Section label="Card Header">
          <Level
            left={
              <h3 style={{ fontSize: "0.9375rem", fontWeight: 700, color: "#f2f6ff" }}>
                Recent Activity
              </h3>
            }
            right={
              <>
                <span style={badgeStyle}>12 new</span>
                <button style={btnSmStyle}>View All</button>
              </>
            }
          />
        </Section>

        <Section label="Footer">
          <Level
            variant="footer"
            left={
              <span style={{ fontSize: "0.8125rem", color: "#4a4a4a" }}>&copy; 2026 Stealthis</span>
            }
            right={
              <>
                <span style={{ fontSize: "0.75rem", color: "#4a4a4a", cursor: "pointer" }}>
                  Privacy
                </span>
                <span style={{ fontSize: "0.75rem", color: "#4a4a4a", cursor: "pointer" }}>
                  Terms
                </span>
                <span style={{ fontSize: "0.75rem", color: "#4a4a4a", cursor: "pointer" }}>
                  Contact
                </span>
              </>
            }
          />
        </Section>
      </div>
    </div>
  );
}

function Section({ label, children }: { label: string; children: ReactNode }) {
  return (
    <div>
      <span
        style={{
          display: "block",
          fontSize: "0.75rem",
          fontWeight: 600,
          color: "#94a3b8",
          textTransform: "uppercase",
          letterSpacing: "0.05em",
          marginBottom: "0.625rem",
        }}
      >
        {label}
      </span>
      {children}
    </div>
  );
}

<script>
export let variant = "default";

const linkStyle = "font-size: 0.8125rem; color: #94a3b8; text-decoration: none; cursor: pointer;";
const btnStyle =
  "background: rgba(56,189,248,0.1); color: #38bdf8; border: 1px solid rgba(56,189,248,0.2); padding: 0.4rem 0.875rem; font-size: 0.8125rem; font-weight: 600; font-family: inherit; border-radius: 0.5rem; cursor: pointer;";
const btnSmStyle =
  "background: rgba(56,189,248,0.1); color: #38bdf8; border: 1px solid rgba(56,189,248,0.2); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600; font-family: inherit; border-radius: 0.5rem; cursor: pointer;";
const badgeStyle =
  "display: inline-flex; align-items: center; padding: 0.2rem 0.625rem; font-size: 0.6875rem; font-weight: 600; color: #38bdf8; background: rgba(56,189,248,0.1); border-radius: 999px;";

const stats = [
  { value: "128", label: "Components" },
  { value: "2.4k", label: "Downloads" },
  { value: "56", label: "Contributors" },
  { value: "4.9", label: "Rating" },
];
</script>

<div
  style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0a0a0a; font-family: Inter, system-ui, sans-serif; color: #f2f6ff; padding: 2rem;"
>
  <div style="width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 1.5rem;">
    <div>
      <h1 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 0.375rem;">
        Level Layout
      </h1>
      <p style="color: #475569; font-size: 0.875rem;">
        Horizontal alignment with left/center/right slots.
      </p>
    </div>

    <!-- Navigation Bar -->
    <div>
      <span
        style="display: block; font-size: 0.75rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.625rem;"
      >
        Navigation Bar
      </span>
      <div
        style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; background: #141414; border: 1px solid #1e1e1e; border-radius: 0.75rem;"
      >
        <div style="display: flex; align-items: center; gap: 0.75rem; justify-content: flex-start;">
          <span style="font-size: 1rem; font-weight: 800; color: #38bdf8; letter-spacing: -0.02em;">
            Stealthis
          </span>
        </div>
        <div style="display: flex; align-items: center; gap: 0.75rem; justify-content: center;">
          <span style={linkStyle}>Home</span>
          <span style={linkStyle}>Library</span>
          <span style={linkStyle}>Docs</span>
        </div>
        <div style="display: flex; align-items: center; gap: 0.75rem; justify-content: flex-end;">
          <button style={btnStyle}>Sign In</button>
        </div>
      </div>
    </div>

    <!-- Stats Row -->
    <div>
      <span
        style="display: block; font-size: 0.75rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.625rem;"
      >
        Stats Row
      </span>
      <div
        style="display: flex; align-items: center; justify-content: space-around; gap: 1rem; padding: 0.75rem 1rem; background: #141414; border: 1px solid #1e1e1e; border-radius: 0.75rem;"
      >
        {#each stats as stat}
          <div style="display: flex; flex-direction: column; align-items: center; gap: 0.125rem;">
            <span style="font-size: 1.25rem; font-weight: 800; color: #f2f6ff;">
              {stat.value}
            </span>
            <span
              style="font-size: 0.6875rem; font-weight: 500; color: #4a4a4a; text-transform: uppercase; letter-spacing: 0.05em;"
            >
              {stat.label}
            </span>
          </div>
        {/each}
      </div>
    </div>

    <!-- Card Header -->
    <div>
      <span
        style="display: block; font-size: 0.75rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.625rem;"
      >
        Card Header
      </span>
      <div
        style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; background: #141414; border: 1px solid #1e1e1e; border-radius: 0.75rem;"
      >
        <div style="display: flex; align-items: center; gap: 0.75rem; justify-content: flex-start;">
          <h3 style="font-size: 0.9375rem; font-weight: 700; color: #f2f6ff;">Recent Activity</h3>
        </div>
        <div style="display: flex; align-items: center; gap: 0.75rem; justify-content: flex-end;">
          <span style={badgeStyle}>12 new</span>
          <button style={btnSmStyle}>View All</button>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <div>
      <span
        style="display: block; font-size: 0.75rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.625rem;"
      >
        Footer
      </span>
      <div
        style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.625rem 1rem; background: transparent; border: 1px solid #1a1a1a; border-radius: 0.75rem;"
      >
        <div style="display: flex; align-items: center; gap: 0.75rem; justify-content: flex-start;">
          <span style="font-size: 0.8125rem; color: #4a4a4a;">&copy; 2026 Stealthis</span>
        </div>
        <div style="display: flex; align-items: center; gap: 0.75rem; justify-content: flex-end;">
          <span style="font-size: 0.75rem; color: #4a4a4a; cursor: pointer;">Privacy</span>
          <span style="font-size: 0.75rem; color: #4a4a4a; cursor: pointer;">Terms</span>
          <span style="font-size: 0.75rem; color: #4a4a4a; cursor: pointer;">Contact</span>
        </div>
      </div>
    </div>
  </div>
</div>

<script setup>
const linkStyle = {
  fontSize: "0.8125rem",
  color: "#94a3b8",
  textDecoration: "none",
  cursor: "pointer",
};

const btnStyle = {
  background: "rgba(56,189,248,0.1)",
  color: "#38bdf8",
  border: "1px solid rgba(56,189,248,0.2)",
  padding: "0.4rem 0.875rem",
  fontSize: "0.8125rem",
  fontWeight: 600,
  fontFamily: "inherit",
  borderRadius: "0.5rem",
  cursor: "pointer",
};

const btnSmStyle = {
  ...btnStyle,
  padding: "0.25rem 0.625rem",
  fontSize: "0.75rem",
};

const badgeStyle = {
  display: "inline-flex",
  alignItems: "center",
  padding: "0.2rem 0.625rem",
  fontSize: "0.6875rem",
  fontWeight: 600,
  color: "#38bdf8",
  background: "rgba(56,189,248,0.1)",
  borderRadius: "999px",
};

const stats = [
  { value: "128", label: "Components" },
  { value: "2.4k", label: "Downloads" },
  { value: "56", label: "Contributors" },
  { value: "4.9", label: "Rating" },
];
</script>

<template>
  <div
    style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0a0a0a; font-family: Inter, system-ui, sans-serif; color: #f2f6ff; padding: 2rem;"
  >
    <div style="width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 1.5rem;">
      <div>
        <h1 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 0.375rem;">
          Level Layout
        </h1>
        <p style="color: #475569; font-size: 0.875rem;">
          Horizontal alignment with left/center/right slots.
        </p>
      </div>

      <!-- Navigation Bar -->
      <div>
        <span class="section-label">Navigation Bar</span>
        <div class="level-bar">
          <div class="slot-left">
            <span style="font-size: 1rem; font-weight: 800; color: #38bdf8; letter-spacing: -0.02em;">
              Stealthis
            </span>
          </div>
          <div class="slot-center">
            <span :style="linkStyle">Home</span>
            <span :style="linkStyle">Library</span>
            <span :style="linkStyle">Docs</span>
          </div>
          <div class="slot-right">
            <button :style="btnStyle">Sign In</button>
          </div>
        </div>
      </div>

      <!-- Stats Row -->
      <div>
        <span class="section-label">Stats Row</span>
        <div class="level-bar" style="justify-content: space-around;">
          <div v-for="stat in stats" :key="stat.label" class="stat-item">
            <span style="font-size: 1.25rem; font-weight: 800; color: #f2f6ff;">
              {{ stat.value }}
            </span>
            <span
              style="font-size: 0.6875rem; font-weight: 500; color: #4a4a4a; text-transform: uppercase; letter-spacing: 0.05em;"
            >
              {{ stat.label }}
            </span>
          </div>
        </div>
      </div>

      <!-- Card Header -->
      <div>
        <span class="section-label">Card Header</span>
        <div class="level-bar">
          <div class="slot-left">
            <h3 style="font-size: 0.9375rem; font-weight: 700; color: #f2f6ff;">Recent Activity</h3>
          </div>
          <div class="slot-right">
            <span :style="badgeStyle">12 new</span>
            <button :style="btnSmStyle">View All</button>
          </div>
        </div>
      </div>

      <!-- Footer -->
      <div>
        <span class="section-label">Footer</span>
        <div
          style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.625rem 1rem; background: transparent; border: 1px solid #1a1a1a; border-radius: 0.75rem;"
        >
          <div class="slot-left">
            <span style="font-size: 0.8125rem; color: #4a4a4a;">&copy; 2026 Stealthis</span>
          </div>
          <div class="slot-right">
            <span style="font-size: 0.75rem; color: #4a4a4a; cursor: pointer;">Privacy</span>
            <span style="font-size: 0.75rem; color: #4a4a4a; cursor: pointer;">Terms</span>
            <span style="font-size: 0.75rem; color: #4a4a4a; cursor: pointer;">Contact</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.section-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.625rem;
}
.level-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 0.75rem;
}
.slot-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-start;
}
.slot-center {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
}
.slot-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}
</style>

Level Layout

Horizontal alignment layout inspired by Bulma’s level component — items are evenly spaced or pushed to the edges using flexbox.

Features

Left, center, and right slot areas
Items evenly spaced with justify-content: space-between
Responsive stacking on mobile viewports
Works with any content: text, buttons, stats, badges
Dark theme styling