Text Image
- 2022-10-11Changed position of .TextImage--imageLink (now child of .TextImage--image) [pul]
- 2022-11-01Added .TextImage--inner wrapper (needed for accordion aniimations, but always added) [pul]
- Statusdone
- CMSText/Bild-Komponente
Default
Headline H2
This is an h3
This is an H4
This is an H5
This is an H6
This is a paragraph.
This is a linkLorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, ut placeat! Sint aspernatur rem quaerat voluptatibus similique tempore quia ipsa rerum alias eligendi, mollitia eius. Excepturi deleniti natus numquam explicabo. Lorem ipsum dolor sit amet consectetur adipisicing elit. At, facilis!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus, autem. subscript Lorem ipsum dolor sit amet consectetur adipisicing elit.supscript
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Attention: Unde veniam eaque molestiae animi aperiam recusandae ad alias, ex doloremque quasi quia rem commodi enim voluptate minus dicta inventore cumque architecto. Aliquid, unde? Obcaecati porro, enim vitae ab fuga repellat nesciunt? Ratione soluta quidem fugit veniam, unde maxime, recusandae molestiae qui nobis non consequuntur. Nesciunt quaerat et laudantium corporis. Veniam molestias tempora sequi, commodi quaerat repellendus sint, ad dolorem tenetur nostrum ipsum temporibus aperiam consequuntur.
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
Extended richtext elements
Headline H2
Sub andsuper
UZH Attention
Underline
Strikethrough
Big
small
typewriter
Code
Cited work
Inline Quotation
Links
Special case: Links with
id or name and no href are anchor link targets and are styled like regular text.
With image
Headline H2
Lorem, ipsum dolor.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, exercitationem totam voluptatibus minus quis, adipisci nam at minima perferendis, magni molestias impedit? Nam id, cum et dolorem rem quae commodi laborum repudiandae quidem perspiciatis qui ipsa error tempora quos accusamus!
With linked image
Headline H2
Lorem, ipsum dolor.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, exercitationem totam voluptatibus minus quis, adipisci nam at minima perferendis, magni molestias impedit? Nam id, cum et dolorem rem quae commodi laborum repudiandae quidem perspiciatis qui ipsa error tempora quos accusamus!
With image popup
Headline H2
Lorem, ipsum dolor.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, exercitationem totam voluptatibus minus quis, adipisci nam at minima perferendis, magni molestias impedit? Nam id, cum et dolorem rem quae commodi laborum repudiandae quidem perspiciatis qui ipsa error tempora quos accusamus!
Floating images
For floating images, editors can optionally set a width, height or both.
If nothing is set, default to a width of --image_width: 300.
Calculate --image_height with the the original image ratio, leave height empty for external images.
If only one dimension is set by the editor, use the original image ratio to calculate the other dimension or leave it empty for external images.
If both dimensions are set by the editor, use them for both --image_width and --image_height.
See the Image component docs for details on how to set sizes.
Headline H2
Lorem, ipsum dolor.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, exercitationem totam voluptatibus minus quis, adipisci nam at minima perferendis, magni molestias impedit? Nam id, cum et dolorem rem quae commodi laborum repudiandae quidem perspiciatis qui ipsa error tempora quos accusamus!
Headline H2
Lorem, ipsum dolor.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, exercitationem totam voluptatibus minus quis, adipisci nam at minima perferendis, magni molestias impedit? Nam id, cum et dolorem rem quae commodi laborum repudiandae quidem perspiciatis qui ipsa error tempora quos accusamus!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, iusto?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati, ex labore earum neque rem voluptate in ipsum fugit nesciunt tenetur quia odit aliquam voluptas officiis quasi. Deserunt ipsum aperiam ipsa fugiat fugit illo. Aliquam molestias culpa suscipit beatae quae porro exercitationem molestiae alias incidunt, dicta assumenda laudantium iure, voluptatem asperiores expedita dignissimos ea aperiam quibusdam a placeat animi enim voluptate, nulla facere? Impedit nobis quaerat et sunt nulla eligendi neque. Ab ipsam error tempora harum ex veritatis ad! Quasi, enim.
With H2 Accordion Function
Headline H2
Hidden Content
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, exercitationem totam voluptatibus minus quis, adipisci nam at minima perferendis, magni molestias impedit? Nam id, cum et dolorem rem quae commodi laborum repudiandae quidem perspiciatis qui ipsa error tempora quos accusamus!
With Headline Accordion Function
Title
Headline h3 as Toggle
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, exercitationem totam voluptatibus minus quis, adipisci nam at minima perferendis, magni molestias impedit? Nam id, cum et dolorem rem quae commodi laborum repudiandae quidem perspiciatis qui ipsa error tempora quos accusamus!
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, exercitationem totam voluptatibus minus quis, adipisci nam at minima perferendis, magni molestias impedit? Nam id, cum et dolorem rem quae commodi laborum repudiandae quidem perspiciatis qui ipsa error tempora quos accusamus!
Headline H4 as Toggle
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, exercitationem totam voluptatibus minus quis, adipisci nam at minima perferendis, magni molestias impedit? Nam id, cum et dolorem rem quae commodi laborum repudiandae quidem perspiciatis qui ipsa error tempora quos accusamus!
Provident distinctio quibusdam unde nulla corrupti illum. Error deserunt suscipit iure magnam debitis. Delectus tempora suscipit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, exercitationem totam voluptatibus minus quis, adipisci nam at minima perferendis, magni molestias impedit? Nam id, cum et dolorem rem quae commodi laborum repudiandae quidem perspiciatis qui ipsa error tempora quos accusamus!
Basic Table
| Title | Title | Title | Title |
|---|---|---|---|
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
Basic Table without wrapper
.TextImage--table is needed. We recommend that this wrapper is added directly in the server rendered code, but we have a JS fallback that adds it when it is not yet present.| Title | Title | Title | Title |
|---|---|---|---|
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
Basic Table with legacy wrapper
.helper-scroll wrapper. It was added via JS, so it should not show up anymore. To be on the safe side, we still support it if it has been added to the richtext source somewhere.| Title | Title | Title | Title |
|---|---|---|---|
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
Basic Table
| Title | Title | Title | Title |
|---|---|---|---|
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
Basic Table
| Title | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
|---|---|---|---|
| Title | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Title | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Title | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Title | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
Table
grid or stripedCell width, cell height, cell alignment are styled inline as before.
| Title A | Title B | Title C |
|---|---|---|
By default for our table arehorizontally left-aligned. vertically top-aligned | Lorem ipsum dolor sit amet consectetur adipisicing elit. | |
This is a h4 headlineThis is a h5 headline | This is a h3 headlineLorem ipsum dolor sit amet consectetur adipisicing elit. A consectetur quas doloremque at molestiae eos libero in omnis corporis aliquid! Quis aliquam qui officia saepe necessitatibus natus vero neque explicabo. | |
Left alignedLorem ipsum. | Center alignedLorem ipsum. | Right alignedLorem ipsum. |
Fixed HeightBaseline aligned | Fixed HeightMiddle aligned | Fixed HeightBottom aligned |
Table
ornate| Title | Title | Title | Title |
|---|---|---|---|
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Subheading | |||
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
| Text | Text | Lorem ipsum dolor sit amet consectetur adipisicing elit. | Text |
Table
sortable. The markup must include a table header <thead> with column headers <th> as before.| Name | Age |
|---|---|
| Hannah | 23 |
| Berta | 17 |
| Marius | 50 |
| Annika | 20 |