Tile

Prominent compact card-like UI block.

html

<div class="tile-demo">
  <button class="tile-demo__tile tile-demo__tile--solid" style="width:96px;height:96px;--accent:#E8A020;" type="button">
    <span class="tile-demo__icon">★</span>
    <span class="tile-demo__label">Favourites</span>
  </button>
</div>
<style>
.tile-demo { font: 13px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; }
.tile-demo__tile { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 14px; cursor: pointer; font: inherit; }
.tile-demo__tile--solid { background: var(--accent); border: none; color: #241430; }
.tile-demo__tile--outline { background: #fff; border: 2px solid var(--accent); color: #241430; }
.tile-demo__tile:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(36,20,48,.18); }
.tile-demo__tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tile-demo__icon { font-size: 22px; }
.tile-demo__label { font-weight: 600; text-align: center; }
</style>

tailwind

<div class="font-sans text-[13px] text-[#241430] bg-[#FAF7F2] p-4">
  <button type="button" class="box-border flex flex-col items-center justify-center gap-1.5 rounded-2xl cursor-pointer font-inherit hover:-translate-y-0.5 hover:shadow-lg focus-visible:outline focus-visible:outline-2 tile-tw tile-tw--solid" style="width:96px;height:96px;--accent:#E8A020;">
    <span class="text-[22px]">★</span>
    <span class="font-semibold text-center">Favourites</span>
  </button>
</div>
<style>
.tile-tw--solid { background: var(--accent); border: none; }
.tile-tw--outline { background: #fff; border: 2px solid var(--accent); }
</style>

react

export function Tile({
  icon = "★",
  label = "Favourites",
  variant = "solid",
  accent = "#E8A020",
  size = 96,
}) {
  const solid = variant === "solid";
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430", background: "#FAF7F2", padding: 16 }}>
      <button type="button" style={{
        boxSizing: "border-box", width: size, height: size, display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 14, cursor: "pointer", font: "inherit",
        background: solid ? accent : "#fff", border: solid ? "none" : `2px solid ${accent}`, color: "#241430",
      }}>
        <span style={{ fontSize: 22 }}>{icon}</span>
        <span style={{ fontWeight: 600, textAlign: "center" }}>{label}</span>
      </button>
    </div>
  );
}