Klasser i RTE

Nummeret liste:

Lore ipsum dolor sit amet, consectetur adipiscing elit.

1. Malesuada fames
   ac turpis egestas integer eget aliquet.
2. Consequat mauris
   nunc congue nisi vitae suscipit tellus mauris a. 

Checkmarks:

Lore ipsum dolor sit amet, consectetur adipiscing elit.

• Punkt 1
• Punkt 2
• Punkt 3

<p class="video23">
<div class="video23">

<p class="podcast23">
<div class="podcast23">

<a class="button">

Læs mere om bolig

<a class="secondary-button">

Læs mere om bolig

<a class="arrow-link">

Læs mere om bolig

<div class="banner-rounded>

<div class="banner-green">

<div class="video23 reduce-margin-special-component">

Her reduceres margin fx over/under en video

Denne tekst hører til ovenstående video.

<img class="reduce-margin-special-component" src="...">

Reducerer margin over/under billedet. Virker også på andet end billeder og kan indsættes i <div>.

‌

<img class="hide-phone" src="...">

Nedenstående billede skjules på en mobil.

‌

<img class="show-phone" scr="...">

Nedenstående billede vises KUN på mobil.

‌

<img class="eight-columns" src="...">

Nedenstående billede fylder 8 kolonner.

‌

<img class="six-columns" src="...">

Nedenstående billede fylder 6 kolonner.

‌

<img class="four-columns" src="...">

Nedenstående billede fylder 4 kolonner.

‌

<img class="phone-screenshot" src="...">

Nedenstående billede vises i en fast størrelse centreret midt på siden.

‌

‌class="image-no-rounded" , når billedhjørner ikke skal runde på mobilen. Kan bruges i alle RTE'er

Standard tabel

<table class="article-table">...</table>

Med grøn border

<div class="banner-green"><table>...</table></div>

Uden grøn border

<div class="banner-green invisible-border"><table>...</table></div>

Grøn border med overskrift (h3)

<div class="banner-green" data-headline="Basis uden row label"><table>...</table></div>

Grøn border med overskrift i h2/h1

<div class="banner-green" data-headline-semantic="h2" data-headline="Basis uden row label"><table>...</table></div>

Den defaulter til h3.

Ekstra stor overskrift i table header

<th><span class="extra-big-tablehead">Emne</span></th>

Sticky første kolonne

<td class="row-label"></td>
(indsættes i første <th> og <td> for hver række)

Farvede bullits i celle

<td><div class="circle-meadow"></div>Lorem ipsum 1</td>

<td><div class="circle-mint"></div>Lorem ipsum</td>

<td><div class="circle-yellow"></div>Lorem ipsum</td>

<td><div class="circle-gold"></div>Lorem ipsum</td>

<td><div class="circle-red"></div>Lorem ipsum</td>

<td><div class="circle-red-dark"></div>Lorem ipsum</td>

Sammenligningstabel

<table class="comparison-table">...</table>

Fremhævede rækker (fordele/ulemper)

<tr class="success-row">...</tr>

<tr class="warning-row">...</tr>

Se eksempler på tabeller her

Tabel i 8 kolonner

<div class="banner-green eight-columns"><table>...</table></div>

Fast bredde i første kolonne

<table class="article-table" data-first-col-width="30%">...</table>

Under denne tekst er der noget indhold, der er skjult. Du kan få indholdet vist ved at trykke på linket nedenfor. Og sjovt nok kan du skjule indholdet igen. Prøv selv, det er vildt fedt.

<div class="expand-collapse" data-closed-text="Vis indhold" data-opened-text="Skjul indhold"><p>SKJULT INDHOLD HER</p></div>

OBS! Hvis klasserne "data-closed-text og "data-opened-text" mangler eller er tomme, vil default henholdsvis være "Se flere detaljer" og "Se færre detaljer".

<div class="quote">

Her skriver man et citat uden apostrof

<div class="quote-author">

Forfatternavn, titel

</div></div>

Se citater i RTE'en her

I slutningen af dette afsnit vises et lille info-ikon, da redaktøren har anvendt class="toggletip". Der også indsat data-link="/investering" data-link-text="Klik her" i span'en, for at få et link på nederst i modalen.

Når man trykker på info-ikonet, vises infoteksten i en pop-up. Kan bruges både i RTE og ved tabeller.

Eksempel: <span class="toggletip">Her skrives en infotekst</span>