Van onze redacteurTom van ZummerenDerde auteur-erbijThu, 08 Jul 2021 14:15:37 GMT

Alle hybrid verrijking op een rijtje

Dit is de inleiding: bedoeld om in één oogopslag te zien of alle ondersteunde artikel-elementen goed werken naar behoren. Zo kan eenvoudig de nieuwe dark mode getest worden voor iOS (en later ook Android) maar ook alle toekomstige design changes aan deze elementen. Dit stuk tekst is overigens het artikel-intro element.

amstel station foto Binh Tran 4 maart 2019 amsterdam vervoer treinBinh Tran

LET OP: Dit artikel bevat een html-embed, er is ook een 100% native test-artikel. En de link naar een hybrid PROD artikel

Allereerst hebben we twee paragrafen onder elkaar <p>

Apple$316,77+0,57% Curabitur blandit tempus porttitor. ABN AMRO BANK N.V.€11,72+1,31% ABN Amro koers, etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. ING Groep€7,63+0,47% Curabitur blandit tempus porttitor. Integer Sony Corp$63,73-0,53% posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CHINA-CSI 100 IndexCNY4.001,71+0,48%Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.

Minder gebruikt, maar nog steeds relevant: de subkop <h3>

Dan: de opsomming, ook wel bekend als <fdmg-bulletpoint>

Praesent commodo cursus magna, vel scelerisque nisl consectetur et

Een opsommings-item met link naar de homepage non mi porta gravida at eget metus

Etiam porta sem malesuada magna mollis euismod

en... de opsomming kan ook rechts-aligned zijn.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et

Donec id elit non mi porta gravida at eget metus

Etiam porta sem malesuada magna mollis euismod

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod.

En natuurlijk de welbekende afbeelding <fdmg-image>

Dit is het bijschrift bij de foto.En de credit: deze foto komt van AT5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis libero magna, cursus eu tincidunt vel, varius id sem. Duis imperdiet lacus massa, vel semper nunc aliquet vel. Maecenas urna orci, tincidunt sit amet sapien a, sodales sodales orci. Donec eu pharetra nisi, et varius diam. Curabitur ullamcorper sed elit non convallis. Curabitur sapien felis, mollis eget tincidunt ac, maximus et ligula. Integer laoreet, sapien ac ultrices porta, metus augue sagittis erat, eu rhoncus magna turpis ut ex. Donec accumsan urna vitae elit commodo congue. Duis ac libero sapien. Donec eu hendrerit nisi. Donec sed justo ac orci aliquam posuere. Nulla pulvinar, est at venenatis gravida, tellus enim iaculis velit, quis hendrerit tellus ipsum id orci. Nam pellentesque eros eu dignissim faucibus. Donec tristique facilisis eros, ut luctus risus rhoncus posuere. Proin consectetur tristique augue egestas malesuada.

En ook eentje right-aligned:

Right-aligned. Amsterdam - 5 november 2020: Beurs, beursplein 5Tammy van Nerum voor het FD

Vivamus tristique libero leo, sit amet eleifend elit sodales vitae. Aliquam ut mauris eu nisi scelerisque mollis nec ut erat. In sollicitudin est nec elit convallis congue. Phasellus lacinia est ut quam placerat, at egestas risus efficitur. Donec viverra lectus vitae dolor blandit, a rhoncus ligula ullamcorper. Phasellus consequat ipsum vel ultricies accumsan. Suspendisse ornare tortor vel arcu maximus, quis aliquet tortor rhoncus. Nam id arcu orci.

En ook eentje right-small aligned:

Right-small aligned. Appartementen aan de Amstel in Amsterdam, behorende tot de huurwoningenportefeuille van Delta Lloyd. Deze portefeuille werd in 2018 door de nieuwe eigenaar van Delta Lloyd, NN Groep, verkocht aan Vesteda. Op de achtergrond ook het voormalige hoofdkantoor van Delta Lloyd.<fdmg-credit/>

Aliquam ut odio scelerisque nisi rutrum convallis et sed arcu. Donec eu diam a massa posuere consectetur. Integer efficitur diam sed nibh pulvinar dignissim. Vestibulum dapibus ac magna sed fringilla. Proin id vestibulum nibh, vitae cursus nibh. Nam vestibulum lacinia mauris, nec egestas libero. Aliquam neque eros, blandit ut volutpat ut, efficitur at massa. Sed luctus elit eu nibh gravida, tristique dictum sem posuere.

Maecenas pellentesque felis tellus, in volutpat mi auctor nec. Aenean pharetra maximus velit, ac pulvinar risus auctor nec. Aenean tempus libero tortor, a condimentum enim eleifend et. Phasellus vitae nunc vehicula, aliquet leo nec, sagittis tellus. Duis in ex laoreet, pellentesque erat nec, molestie odio. Etiam fringilla consectetur dolor sit amet malesuada. Sed nec mi eleifend metus ultrices ornare. Aenean maximus risus malesuada, dictum ex id, tincidunt metus. Nam eu vehicula elit, ac consectetur massa. Aenean a nisl et sem consectetur pellentesque ut sed erat. Donec a arcu lacus. Cras sed scelerisque velit. Curabitur in est nisi. Maecenas leo nisl, auctor nec ex sit amet, elementum posuere enim.

Een set SVG's als infographic, deze heet <fdmg-infographic-extended>

Plak geen twee SVG aan elkaar. Dat levert problemen op.

Een LocalFocus infographic, also known as <fdmg-infographic>

Het beruchte cijferkader, oftewel <fdmg-number-frame>

$ 145.600.000.000

Dit is de in een cijferkader de nett worth van Jeff Bezos

Een PDFje ... <fdmg-pdf>

📎

1200px-Logo_Het_Financieele_Dagblad.pdf

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Een quote'je <fdmg-quote>

‘Vestibulum id ligula porta felis euismod semper.’

• Lorem Ipsum, FDMG-Quote

YouTube videootje! <fdmg-youtube>

Vimeo? Wie gebruikt dat nog? <fdmg-vimeo>

Tweetje ... <fdmg-twitter>

Video-tweet

Tweet without image or video

BNR embed <html-embed>

Door met de width te spelen kun je de audio-widget 100% of full width krijgen of kleiner

Soundcloud <fdmg-soundcloud>

Instagram <fdmg-instagram> werkt niet meer...

Lees ook deze artikelen

Deze gaat over iets met een ABN AMRO CEO

Maar ook deze over een steunpakket

En deze over olie!

Tekstkader <fdmg-text-frame>

Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.

Een tekstkader is een beetje apart, want je kan er best veel mee.

K.K. Metal

Zo kan je bijvoorbeeld ook een afbeelding tonen. En je kan de tekst ook cursief of bold maken. Het is zelfs mogelijk om er een link te plaatsen.

Bijzonder niet?

Of wat dacht je ervan om de tekstkader anders te laten uitlijnen?

Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.

Tussenkop

Rechts

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Woordkader <fdmg-stack-frame>

Maecenas faucibus mollis interdum.

Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Samenvatting <fdmg-summary>

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit
Nulla vitae elit libero, a pharetra augue
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor

Linkblok <fdmg-related-link>

Profiel van president Tsai Ing-wen

LET OP: Deprecated! Maar dit element moet in verband met backwards compatibility nog steeds wel goed getoond worden.