ContentSection

Guidelines#

Use it for each page under Settings, so every settings screen opens the same way.

What you provide: title (sentence case, 18px medium), desc (14px muted-foreground, up to 56rem), and one child element as the body. fullWidth lifts the 36rem body cap for tables and grids.

Facts#

API#

TypeScript declarations emitted from src/features/settings/components/content-section.tsx.

type ContentSectionProps = {
    title: string;
    desc: string;
    children: React.JSX.Element;
    fullWidth?: boolean;
};
export declare function ContentSection({ title, desc, children, fullWidth, }: ContentSectionProps): JSX.Element;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "h-52 flex flex-col" },
    h(DC.ContentSection, { title: "Deliverability", desc: "Warm-up health and inbox placement for every connected mailbox." },
      h("div", { className: "grid grid-cols-3 gap-3" },
        h(DC.MetricTile, { label: "Inbox placement", value: "92%", tone: "good", hint: "Last test 2 days ago" }),
        h(DC.MetricTile, { label: "Warm-up score", value: "71", tone: "warn", hint: "Day 9 of 14" }),
        h(DC.MetricTile, { label: "Spam rate", value: "—", hint: "No test yet" }))));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Layout#