# Elements: Data display, media and code, further examples > Plainkit 0.28.0. Generated by scripts/build-skills.mjs from core/dist/elements/api.full.json. Do not edit: change the source and run the generator. The element sections in `elements-data-display.md` show the first example of each element; these are the rest. ## `pk-avatar` Example: No name or image ```html ``` ## `pk-badge` Example: Status dots ```html Online Syncing ``` ## `pk-chart` Example: Donut and stack ```html
ChannelOrders
Web52
Market31
 ``` ## `pk-code-view` Example: Highlighted lines ```html function total(items) { const sum = items.reduce((a, i) => a + i.qty, 0); return sum; } ``` Example: A slice starting at line 120, height capped ```html one two three four five six ``` Example: Long lines scroll sideways ```html const message = 'This line is longer than the box, so it scrolls sideways and the numbers stay put.'; short ``` ## `pk-data-table` Example: Preset search (from a link) and no Select all offer ```html ``` Example: Page size, add button, labels and empty states (set load from script) ```html ``` ## `pk-field-list` Example: Stacked, dense ```html
Cost
$2.10
 ``` Example: Data-driven items ```html ``` Example: Data-driven items, show-empty ```html ``` ## `pk-frame` Example: Full width ```html ``` ## `pk-gallery` Example: Two controls only ```html ``` Example: The full gallery at a fixed height ```html ``` ## `pk-heat-map` Example: One dominant item ```html ``` Example: Boxes as links ```html ``` Example: Data table instead of the map ```html ``` Example: From a table ```html
AreaCountSeverity
Billing42warning
Sign-in31danger
Search24
Docs12success
 ``` Example: Rows layout, stable order ```html ``` Example: Intensity scale ```html ``` Example: Grouped by team ```html ``` ## `pk-icon` Example: Size steps ```html ``` ## `pk-image-gallery` Example: Read-only, two fixed columns ```html ``` Example: Editable without the add tile: make primary, remove and reorder, the host supplies its own add control (a real Blazor InputFile, say) elsewhere ```html ``` ## `pk-list-group` Example: Dense results with an indent ```html ``` Example: Checklist ```html ``` ## `pk-local-time` Example: Relative and another locale ```html

Updated

``` ## `pk-log` Example: Empty, with its own text ```html Waiting for the first line. ``` ## `pk-quote` Example: Large, with a source ```html

The simplest setup we have shipped.

Sam Lee Head of Product ``` ## `pk-specimen` Example: Radius, shadow and layer ```html Sticky header ``` ## `pk-stat` Example: Change and trend ```html ``` Example: Change in points ```html ``` Example: Dashboard tile as a button ```html ``` ## `pk-swatch` Example: A literal colour ```html ``` ## `pk-table` Example: Raw table with compact columns ```html
NameAmountActions
Bracket4.00Remove
 ``` Example: Header help and action ```html ``` Example: Totals footer ```html Total 67.00 for 10 items ``` Example: Card title column ```html ``` Example: Row links ```html ``` Example: Date-time column on one line ```html ``` Example: Sortable, selectable table ```html Archive ``` Example: Select all rows of a paged list ```html Export ``` Example: Page selection only (no Select all offer) ```html Approve ``` Example: Empty and loading ```html ``` Example: Expandable rows ```html

3 lines: Widget 1 x 20.

 ``` Example: Host-controlled expansion and several panels per row (issue 1219) ```html

3 lines: Widget 1 x 20.

1 line: Widget 2 x 4.

Held for credit review.

 ``` Example: Row tone and indent (issue 1019) ```html ``` Example: Editable cells ```html Listed, row 1 Listed, row 2 ``` Example: Row context menu (issue #586) ```html Select row Deselect row ```