DREAL Museums — snippets
Copy any block below and paste it into your page. Everything is plain HTML
with the styling written on the elements, so it will not fight your own CSS
and it needs no script and no stylesheet from us.
The pictures and films load from https://dreal.co, so there is nothing for
you to upload. If you would rather host them yourself, the same files are in
this kit under film/ and photography/ — change the
addresses in the block to your own.
Please do not add a price. Prices differ by country and change; the stores
show each traveller the price that applies to them.
Compact — the four sites
The smallest block. The four sites in a row, the headline and the button — for a narrow sidebar or anywhere short. It does not carry the line about needing a connection at the sites; if you use this one, please say that in your own words nearby.
Compact — the photograph
The same size with the photograph instead of the four sites.
Tall — the four sites
For a sidebar or a narrow column. The four sites, what the product is, and the button. About 3.5 MB because the four films are in it.
Tall — the four sites, stills instead of films
The same card without the video. Use it on a page that already carries a lot, or where you would rather not autoplay anything.
Wide — the four sites
For a full content column or a banner strip. The four sites run across the top, and fold to two rows by themselves in a narrow column.
Tall — the photograph
The quietest of the four, and the lightest: one picture, no video.
Wide — the photograph beside the words
The banner shape. The picture and the words sit side by side, and stack by themselves when the column is narrow.
The four films on their own — tall
For a page that already has its own words around it.
The four films on their own — wide
The same, running across instead of down.
Embed (iframe) — sites-compact
For a site builder that will not accept pasted HTML. One line, and we keep it up to date. It is set to 320x320; if it leaves a gap under the card on your page, lower the height until the gap closes — but not far enough to cut the button off.
No preview here — a browser will not put our page inside a document opened from your own computer. It renders on your live site. What it shows is the card above, at the size in the code below; paste the line and look at it there.
Embed (iframe) — sites-tall
For a site builder that will not accept pasted HTML. One line, and we keep it up to date. It is set to 420x1120; if it leaves a gap under the card on your page, lower the height until the gap closes — but not far enough to cut the button off.
No preview here — a browser will not put our page inside a document opened from your own computer. It renders on your live site. What it shows is the card above, at the size in the code below; paste the line and look at it there.
Embed (iframe) — sites-wide
For a site builder that will not accept pasted HTML. One line, and we keep it up to date. It is set to 900x700; if it leaves a gap under the card on your page, lower the height until the gap closes — but not far enough to cut the button off.
No preview here — a browser will not put our page inside a document opened from your own computer. It renders on your live site. What it shows is the card above, at the size in the code below; paste the line and look at it there.
Embed (iframe) — hero-compact
For a site builder that will not accept pasted HTML. One line, and we keep it up to date. It is set to 320x360; if it leaves a gap under the card on your page, lower the height until the gap closes — but not far enough to cut the button off.
No preview here — a browser will not put our page inside a document opened from your own computer. It renders on your live site. What it shows is the card above, at the size in the code below; paste the line and look at it there.
Embed (iframe) — hero-tall
For a site builder that will not accept pasted HTML. One line, and we keep it up to date. It is set to 420x640; if it leaves a gap under the card on your page, lower the height until the gap closes — but not far enough to cut the button off.
No preview here — a browser will not put our page inside a document opened from your own computer. It renders on your live site. What it shows is the card above, at the size in the code below; paste the line and look at it there.
Embed (iframe) — hero-wide
For a site builder that will not accept pasted HTML. One line, and we keep it up to date. It is set to 900x360; if it leaves a gap under the card on your page, lower the height until the gap closes — but not far enough to cut the button off.
No preview here — a browser will not put our page inside a document opened from your own computer. It renders on your live site. What it shows is the card above, at the size in the code below; paste the line and look at it there.