Role

Named collection of permissions.

html

<div class="rolec">
  <p class="rolec__name">Role: <strong>Content Editor</strong></p>
  <div class="rolec__chips">
    <span class="rolec__chip" style="background:#F5C2E0;">view</span>
    <span class="rolec__chip" style="background:#F5C2E0;">edit</span>
    <span class="rolec__chip" style="background:#F5C2E0;">publish</span>
    
  </div>
  <p class="rolec__hint">A role is just a named bundle of permissions &mdash; assign the role, and every permission in it comes along.</p>
</div>
<style>
.rolec { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.rolec__name { margin: 0 0 12px; }
.rolec__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.rolec__chip { font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px; color: #241430; }
.rolec__hint { margin: 0; font-size: 10px; color: #24143099; }
</style>

tailwind

<div class="font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-3">Role: <strong>Content Editor</strong></p>
  <div class="flex gap-1.5 flex-wrap mb-3">
    <span class="text-[11px] font-bold py-1.5 px-2.5 rounded-full" style="background:#F5C2E0;">view</span>
    <span class="text-[11px] font-bold py-1.5 px-2.5 rounded-full" style="background:#F5C2E0;">edit</span>
    <span class="text-[11px] font-bold py-1.5 px-2.5 rounded-full" style="background:#F5C2E0;">publish</span>
    
  </div>
  <p class="m-0 text-[10px] text-[#24143099]">A role is just a named bundle of permissions &mdash; assign the role, and every permission in it comes along.</p>
</div>

react

export function Role({
  roleName = "Content Editor",
  canPublish = true,
  canDelete = false,
  accent = "#F5C2E0",
}) {
  const chip = { fontSize: 11, fontWeight: 700, padding: "5px 11px", borderRadius: 999, color: "#241430", background: accent };
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px" }}>Role: <strong>{roleName}</strong></p>
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 12 }}>
        <span style={chip}>view</span>
        <span style={chip}>edit</span>
        {canPublish && <span style={chip}>publish</span>}
        {canDelete && <span style={chip}>delete</span>}
      </div>
      <p style={{ margin: 0, fontSize: 10, color: "#24143099" }}>A role is just a named bundle of permissions &mdash; assign the role, and every permission in it comes along.</p>
    </div>
  );
}