Component Library

Component Library

The package ships ready-made Livingdocs components in livingdocs/. Components marked with ✅ are installed automatically by srl init. All others can be added later:

npx srl add components   # pick single components
npx srl add groups       # add whole groups

Shared properties (column Properties) are described in Component Properties.

---

Titles (010.Titles) ✅

Component	Label	Properties	Notes
title-h1	Title (h1)	h1-as, width-reduced, pdf-spacer
title-h2	Title (h2)	h2-as, width-reduced, pdf-spacer	Optional number (max. 2 chars recommended)
title-h3	Title (h3)	h3-as, width-reduced, pdf-spacer	Optional number (max. 4 chars)
title-h4	Title (h4)	h4-as, width-reduced, pdf-spacer	Optional number (max. 6 chars)
title-h5	Title (h5)	h5-as, width-reduced, pdf-spacer
title-h6	Title (h6)	width-reduced, pdf-spacer

The hX-as property keeps the semantic heading level but uses the styling of a lower level ("Styling from title h3" …).

Extended Headings (011.Extended_Headings)

Component	Label	Notes
heading-level-7	Heading level 7	Not semantically recommended
heading-level-8	Heading level 8	Not semantically recommended
heading-level-9	Heading level 9	Not semantically recommended

Text (020.Text) ✅ (except paragraph-strong)

Component	Label	Properties	Notes
lead	Lead	pdf-spacer	Max. 325 chars recommended
paragraph	Paragraph	pdf-spacer
paragraph-strong	Paragraph (strong)	pdf-spacer	Not installed by default
link	Link	pdf-spacer	Toggle "Show paragraph"; link text is plain text
quote	Quote	width-reduced, pdf-spacer, hide-quote-characters	Quote characters come from meta.quote in srl.config.json
quote-with-portrait	Quote with image	portrait-borders, width-reduced, pdf-spacer, hide-quote-characters	Portrait 1:1
footnote-container	Footnote container	pdf-spacer	Only accepts footnote-item
footnote-item	Footnote item		Only inside footnote-container

Lists (030.Lists) ✅

Component	Label	Allowed children
unordered-list	List (unordered)	list-item-unordered-list
ordered-list	List (numeric)	list-item-ordered-list
alphanumeric-list	List (alphanumeric)	list-item-alphanumeric-list
list-item-*	List item	–

• Every list has the pdf-spacer property.
• Every list item has the toggle Add nested list container, which creates a sub list of the same type.
• In the editor, pressing Enter in a list creates a new list item of the matching type.

Media (040.Media)

Component	Label	Properties	Notes
table ✅	Table (finance plus)	pdf-padding, pdf-font-size, width-reduced, pdf-spacer	Content is delivered by the nswow-table service (doc-include). Rendered in the app by table.vue (SrlLdTable, incl. download and responsive sub components).
image ✅	Image	width-all, pdf-spacer	Toggles: alt text, separate mobile image, caption
video ✅	Video	showVideoLink, width-all, pdf-spacer	Thumbnail 16:9; video.vue. showVideoLink prints a link to the video in the PDF.
interactive-element	Interactive element	width-reduced, pdf-spacer	Free HTML (e.g. chart iframe) on the web, separate image for PDF

Buttons (060.Buttons)

Component	Label	Properties	Notes
button-container	Button container		Only accepts button
button	Button	icon	Only inside button-container; text is plain text

Container (070.Container)

Component	Label	Properties	Notes
aside-content-container	Aside content container	sticky, pdf-spacer	Side column (only paragraph and link) next to a main content area. sticky keeps the side column visible while scrolling.
columns-container	Layout column container	width-reduced, vertical-alignment, pdf-spacer	2 columns by default; toggles for column 3 and 4
background-container	Background container	background-color	Coloured section

CV (080.CV) ✅

Component	Label	Properties	Notes
cv	CV	portrait-borders, pdf-spacer	Portrait 1:1
cv-time-span	CV time span

Signatures (090.Signatures) ✅

Component	Label	Notes
signature-container	Signature container	Starts with two signature-items; pdf-spacer
signature-item	Signature item	Name, position (plain text) and optional image

Misc (100.Misc)

Component	Label	Properties	Notes
anchor ✅	Anchor		Jump mark; text is plain text
accordion	Accordion	pdf-spacer	Header accepts title-h2 … title-h6; accordion.vue

PDF (110.PDF)

PDF-only components. Most of them are removed from the web, Word and XHTML output.

Component	Label	Properties	Notes
pdf-page-reference	PDF page reference	pdf-hide-page-margin-boxes	Embeds a whole PDF page via the nswow-pdf service
pdf-element-reference	PDF element reference	pdf-spacer-before, pdf-spacer-after	Embeds a PDF element via nswow-pdf
pdf-pagebreak ✅	PDF page break
pdf-columnbreak	PDF column break		Only inside pdf-column-container
pdf-column-container	PDF column container	column-behaviour, width-reduced	Balanced or unbalanced columns
pdf-cover ✅	PDF cover	invert-cover, pdf-page-layout	Toggles: logo, main title, sub title; cover image A4
pdf-chapter-cover	PDF chapter cover
pdf-landscape-container	PDF landscape container	page-size	Landscape pages (A4 or A3)
pdf-publication-title ✅	PDF publication title
pdf-chapter-title ✅	PDF chapter title
pdf-chapter-navigation-container	PDF chapter navigation container		Only accepts pdf-chapter-navigation-item
pdf-chapter-navigation-item	PDF chapter navigation item	pdf-chapter-navigation-item-current	Marks the current chapter
pdf-toc-page ✅	ToC page	pdf-hide-page-margin-boxes, toc-page-type	Accepts pdf-toc-item-title, pdf-toc-item, pdf-pagebreak; type "Main ToC" or default
pdf-toc-item-title ✅	ToC item title		Only inside pdf-toc-page
pdf-toc-item ✅	ToC item	toc-title	Number + text; toc-title styles the item as a title

Startpage (120.Startpage)

Components for a landing page. They are removed from PDF, Word and XHTML.

Component	Label	Properties	Notes
hero-video	Hero video	font-color	Free HTML video + h1 title
teaser-title-image-quote	Teaser title/image/quote	icon
teaser-quote	Teaser quote	icon, reverse, hide-quote-characters, font-color	Separate mobile image (393:702)
teaser	Teaser	icon, reverse	Image 16:9, separate mobile image

Hosting Components (130.Hosting_Components) ✅

Web-only components rendered by Vue. The editor shows a placeholder. They are removed from PDF, Word and XHTML.

Component	Label	Vue component	Notes
download-center	Download center	download-center.vue	Lists the report downloads (from useDownloads()), grouped by section titles, linked to ./downloads/<locale>/…
search	Search	search.vue, searchHighlightOnTarget.vue	Full-text search with auto search and "more results"; highlights the hit on the target page

---

Output-specific markup

The component HTML uses attributes that control what is kept in each output format:

Attribute	Output
data-remove-from-web	Web app
data-remove-from-pdf	PDF
data-remove-from-word	Word
data-remove-from-xhtml	XBRL/XHTML
data-remove-from-translate-plus	Translation export

Values:

• complete removes the element including its content.
• transient removes only the element itself and keeps its children (used for wrappers).

data-replace-tag="div" replaces a custom element such as <srl-ld-table> with a div on export.

Custom elements such as <srl-ld-table>, <srl-ld-search> or <srl-ld-download-center> are rendered in the app by the matching global Vue component (SrlLd<Name>, see Components#vue-components).

Every <srl-ld-…> element needs data-replace-tag, unless it is removed from the XHTML with data-remove-from-xhtml. Otherwise the XHTML output becomes inconsistent.