ankow
OverviewBreadCrumbButtonButtonGroupClipboardDialogDirectoryViewFileUploaderFormTextInputPasswordInputEmailInputNumberInputDateTimeInputTagInputCheckBoxRadioButtonSwitchFormGroupInputGroupIconLayoutMainLayoutTopBarBottomBarListItemMenuMultiSelectNotificationOfflineBannerPopoverProgressBarSaveIndicatorSectionItemSettingsItemSingleSelectSplitLayoutSpinnerTabViewTableViewTooltipTextOverflowTreeViewSectionItem
A section container with a title header, optional filter bar and action buttons, with responsive mobile support.
Basic Section
Basic Section
Basic Section
This is a basic section with just a title and body content. The title can also be overridden via the header-title slot.
With Action Buttons
User Profile
User Profile
Username: Alice
With Filter Bar
Search Results
Search Results
On narrow screens (≤576px), the filter bar moves below the header. Resize the browser to see this behavior.
With Title Extra
Statistics(42 items)
Statistics(42 items)
Use header-title-extra slot to add supplementary info next to the title.
With Left Buttons
Back Navigation
Back Navigation
Use the header-buttons-left slot to add buttons left of the title, commonly used for back navigation.
Custom Title (Slot)
Custom Rendered Title
Custom Rendered Title
When using the header-title slot, the title prop is ignored.
Usage
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | String | - | Section title (ignored if header-title slot is used) |
Slots
| Slot | Description |
|---|---|
| default | Section body content |
| header-title | Custom title content (overrides title prop) |
| header-title-extra | Extra content rendered next to the title |
| header-buttons-left | Buttons placed left of the title, commonly for back navigation |
| header-buttons | Action buttons in the header area (right side) |
| filter-bar | Filter/search controls. On mobile (≤576px), teleported below the header |
CSS Classes
| Class | Description |
|---|---|
| .pankow-section-item | Root section container |
| .pankow-section-item-header | Header row (title + buttons) |
| .pankow-section-item-header-title-text | Title text wrapper |
| .pankow-section-item-divider | Horizontal divider line |
| .pankow-section-item-body | Body content area |
| .pankow-section-item-mobile-filter-bar | Mobile filter bar container (visible on narrow screens) |