Level Layout

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

فتح في المختبر

css javascript svelte vue

الأهداف: TS JS HTML React Svelte Vue

الكود

*,
*::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