Richtext Editor Styles Demo
Eyebrow — uppercase intro label
H1 Heading with optional serif inline
Subhead — 20px regular weight, sits under a heading
Regular paragraph. Lorem ipsum dolor sit amet, link in paragraph consectetur adipiscing elit. Text with coloured red text inline. More text after.
Quote paragraph — Bodoni italic 20px. Coloured fragment inside quote . Lorem ipsum dolor sit amet.
Eye-catcher — Covered by Your Grace (sketch) font, 20px. Lorem ipsum dolor sit amet.
H2 — lists and links
Standalone block link — ibexa.co
- Link to products page
- Item with a link to blog inline
- Item with nested list
- Nested item alpha
- Nested item beta
- First item — link to resources
- Second item with nested
- Sub-item 1
- Sub-item 2
- Third item
H3 — blockquote
Blockquote — Bodoni font, blue text on light purple background with cite icon. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
H2 — icon and text variants
Six heading sizes and six different icons:
Icon and text — H1 size (arrow-right-square)
Icon and text — H2 size (tick-square)
Icon and text — H3 size, default (user)
Icon and text — H4 size (calendar)
Icon and text — H5 size (email)
Icon and text — H6 size (linkedin)
H2 — section wrappers: all backgrounds
background: none — align: left — size: medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae tempus diam, nec maximus magna.
background: dark — align: left — size: medium
Lorem ipsum dolor sit amet. Link in dark wrapper (white override). Text with coloured text .
background: bordered — align: left — size: medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae tempus diam.
background: gray — align: left — size: medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae tempus diam.
background: warm — align: left — size: medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae tempus diam.
H2 — section wrappers: all sizes
background: gray — align: left — size: small
Small size wrapper.
background: gray — align: left — size: medium
Medium size wrapper — default.
background: gray — align: left — size: large
Large size wrapper.
H2 — section wrappers: all alignments
background: bordered — align: left — size: medium
Left alignment (default).
background: bordered — align: center — size: medium
Center alignment.
background: bordered — align: right — size: medium
Right alignment.
H2 — section wrappers: all brand overrides
brand_override: none (inherit siteaccess)
Uses current brand theme colours.
brand_override: ibexa
Forces Ibexa brand theme.
brand_override: actito
Forces Actito brand theme.
brand_override: quable
Forces Quable brand theme.
brand_override: raptor
Forces Raptor brand theme.
brand_override: qualifio
Forces Qualifio brand theme.
brand_override: cohesivo
Forces Cohesivo brand theme.
H2 — table
Column A | Column B | Column C |
|---|---|---|
Row 1, cell B | Row 1, cell C | |
Row 2, cell A | Bold with colour | Row 2, cell C |
Typography scale — H2
Typography scale — H3
Typography scale — H4
Typography scale — H5
Typography scale — H6
End of demo. More links: About Ibexa, Contact, Careers.