Dashboard Template

Predefined dashboard arrangement.

html

<div class="dtemplate dtemplate--overview" style="--c:#E8A020;">
  <div class="dtemplate__thumb" aria-hidden="true">
    <span></span><span></span><span></span>
  </div>
  <div class="dtemplate__meta">
    <strong>Sales overview</strong>
    <span class="dtemplate__kind"></span>
  </div>
  
</div>
<style>
.dtemplate { display: flex; align-items: center; gap: 10px; font: 13px system-ui, sans-serif; color: #241430; border: 1px solid #24143018; border-radius: 10px; padding: 10px; max-width: 300px; }
.dtemplate__thumb { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 44px; height: 32px; border-radius: 4px; overflow: hidden; border: 1px solid #24143018; flex: none; }
.dtemplate__thumb span { background: var(--c); opacity: .4; }
.dtemplate--overview .dtemplate__thumb span:nth-child(1) { grid-column: span 2; opacity: .8; }
.dtemplate--sales .dtemplate__thumb span:nth-child(2) { grid-row: span 2; opacity: .8; }
.dtemplate--ops .dtemplate__thumb span { opacity: .6; }
.dtemplate__kind { display: block; font-size: 11px; opacity: .7; }
.dtemplate--overview .dtemplate__kind::before { content: "Overview layout"; }
.dtemplate--sales .dtemplate__kind::before { content: "Sales layout"; }
.dtemplate--ops .dtemplate__kind::before { content: "Ops layout"; }
.dtemplate__star { margin-left: auto; flex: none; }
</style>

tailwind

<div class="dtemplate-tw dtemplate-tw--overview flex items-center gap-2.5 font-sans text-[13px] text-[#241430] border border-[#24143018] rounded-[10px] p-2.5 max-w-xs" style="--c:#E8A020;">
  <div class="dtemplate-tw__thumb grid grid-cols-2 gap-0.5 w-11 h-8 rounded overflow-hidden border border-[#24143018] flex-none" aria-hidden="true">
    <span class="bg-[var(--c)] opacity-40"></span><span class="bg-[var(--c)] opacity-40"></span><span class="bg-[var(--c)] opacity-40"></span>
  </div>
  <div>
    <strong class="block">Sales overview</strong>
    <span class="block text-[11px] opacity-70 dtemplate-tw__kind"></span>
  </div>
  
</div>
<style>
.dtemplate-tw--overview .dtemplate-tw__kind::before { content: "Overview layout"; }
.dtemplate-tw--sales .dtemplate-tw__kind::before { content: "Sales layout"; }
.dtemplate-tw--ops .dtemplate-tw__kind::before { content: "Ops layout"; }
</style>

react

export function DashboardTemplate({
  name = "Sales overview",
  layout = "overview",
  color = "#E8A020",
  starred = false,
}) {
  const kind = { overview: "Overview layout", sales: "Sales layout", ops: "Ops layout" }[layout] ?? "Overview layout";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, font: "13px system-ui, sans-serif", color: "#241430", border: "1px solid #24143018", borderRadius: 10, padding: 10, maxWidth: 300 }}>
      <div aria-hidden="true" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2, width: 44, height: 32, borderRadius: 4, overflow: "hidden", border: "1px solid #24143018", flex: "none" }}>
        <span style={{ background: color, opacity: 0.4 }} /><span style={{ background: color, opacity: 0.4 }} /><span style={{ background: color, opacity: 0.4 }} />
      </div>
      <div>
        <strong style={{ display: "block" }}>{name}</strong>
        <span style={{ display: "block", fontSize: 11, opacity: 0.7 }}>{kind}</span>
      </div>
      {starred && (
        <svg style={{ marginLeft: "auto", flex: "none" }} viewBox="0 0 16 16" width="14" height="14" aria-label="Starred">
          <path d="M8 1l2.1 4.6 5 .6-3.7 3.5.9 5-4.3-2.4-4.3 2.4.9-5L1 6.2l5-.6z" fill={color} />
        </svg>
      )}
    </div>
  );
}