Examples
A title, an icon and any body content.
About Acme Cloud
Acme Cloud has hosted apps for teams since 2014. The body of a SectionCard takes any content: prose, a form, a chart or a list.
HeaderActions puts controls opposite the title; wrap the body in ChildContent when you use it.
Weekly signups
1284
new accounts since Monday
ShowDivider, TitleTypo and Elevation tune the chrome.
Tighter
ShowDivider="false" drops the rule under the header.
Larger title
TitleTypo sets the title scale; Elevation="0" plus a border gives a flat card.
Playground
Release notes
Version 2.4 brings faster deploys and a new billing page.<SectionCard
Title="Release notes"
Icon="description"
Class="max-w-sm">
Version 2.4 brings faster deploys and a new billing page.
</SectionCard>API
<SectionCard>
DaisyBlazor.LayoutPaper surface with an icon + title header, an optional rule beneath it, optional right-aligned header actions, and a free-form body.
Parameters
- Elevation int= 2
Paper elevation. Defaults to 2.
- Icon string= null
Optional Material symbol ligature shown to the left of Title (e.g. Icons.Material.Filled.Person). Omit for a text-only header.
- ShowDivider bool= true
Draws a rule between the header and the body. Defaults to true, matching the prevailing convention; set false for a tighter card.
- Title string= required
Section title rendered in the header.
- TitleTypo Typo= Typo.h6
Typography scale for the title. Defaults to h6.
- Class string= null
Extra CSS classes appended to the surface, after the default p-4.
- Style string= null
Optional inline style forwarded to the surface.
Content
- ChildContent RenderFragment
Section body — any content.
- HeaderActions RenderFragment
Optional controls aligned to the right of the title, such as a refresh button or a filter toggle. When supplied, the header becomes a space-between row.