Widget Body

Main widget content.

html

<div class="wbody wbody--comfortable " style="--c:#BFD9F2;" aria-busy="false">
  
  <p class="wbody__text">1,204 active sessions in the last hour.</p>
</div>
<style>
.wbody { font: 13px/1.5 system-ui, sans-serif; color: #241430; padding: 14px; }
.wbody--compact { padding: 8px; }
.wbody__text { margin: 0; }
.wbody--loading .wbody__text { display: none; }
.wbody__skeleton { display: block; height: 14px; border-radius: 4px; background: linear-gradient(90deg, #24143014, var(--c), #24143014); background-size: 200% 100%; }
@keyframes wbody-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .wbody__skeleton { animation: wbody-shimmer .2s infinite; }
}
</style>

tailwind

<div class="wbody-tw wbody-tw--comfortable  font-sans text-[13px] leading-relaxed text-[#241430] p-3.5" style="--c:#BFD9F2;" aria-busy="false">
  
  <p class="wbody-tw__text m-0">1,204 active sessions in the last hour.</p>
</div>
<style>
.wbody-tw--compact { padding: 8px; }
.wbody-tw--loading .wbody-tw__text { display: none; }
.wbody-tw__skeleton { background: linear-gradient(90deg, #24143014, var(--c), #24143014); background-size: 200% 100%; }
@keyframes wbody-tw-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .wbody-tw__skeleton { animation: wbody-tw-shimmer .2s infinite; }
}
</style>

react

export function WidgetBody({
  content = "1,204 active sessions in the last hour.",
  density = "comfortable",
  loading = false,
  color = "#BFD9F2",
}) {
  return (
    <div aria-busy={loading} style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", padding: density === "compact" ? 8 : 14 }}>
      {loading ? (
        <span style={{ display: "block", height: 14, borderRadius: 4, background: "linear-gradient(90deg, #24143014, " + color + ", #24143014)" }} />
      ) : (
        <p style={{ margin: 0 }}>{content}</p>
      )}
    </div>
  );
}