• BOEK EEN KAMER
  • BOEK EEN TAFEL
Menu
  • KAMERS
    KAMERS
    • Comfort Kamers
    • Luxury Kamers
    • Empire Kamers
    • Suites
  • SPECIALS
  • CULINAIR
    CULINAIR
    • Restaurant Karel 5*
    • Brasserie Goeie Louisa
    • Bar en Lounge
    • Ontbijt
  • MEETING & EVENTS
    MEETING & EVENTS
    • Onze zalen
    • Private Dining
    • Speciale Gelegenheden
    • Zakelijke Arrangementen
    • Zakelijk Overnachten
  • OVER ONS
    OVER ONS
    • Contact
    • Locatie
    • Parkeerinformatie
    • Faciliteiten
    • Galerij
    • Geschiedenis
  • ONTDEK UTRECHT
  • Vacatures
  • Contact
  • Locatie
  • Nederlands
  • English
  • BOEK EEN KAMER
  • BOEK EEN TAFEL
Menu
ma.di.wo.do.vr.za.zo.
ma.di.wo.do.vr.za.zo.

Locatie

  • Grand Hotel Karel V
  • Geertebolwerk 1
  • 3511 XA Utrecht
  • Nederland
  • T +31(0) 30 233 75 55
  • E info@karelv.nl

Quick Links

  • Kamers
  • Specials
  • Brasserie Goeie Louisa
  • Restaurant Karel 5
  • Faciliteiten
  • Meeting & Events
  • Ontdek Utrecht

Informatie

  • Contact
  • FAQ
  • Cadeaukaart
  • Locatie
  • Parkeerinformatie
  • Pers & Media
  • Duurzaamheid
  • Vacatures
  •  
  • Algemene Voorwaarden
  • Cookie instellingen
  • Privacy- en cookieverklaring
  • Disclaimer

Social Media

  • Facebook
  • Instagram
  • Linkedin
  • tripadvisor
  • greenkey
  • worldhotels
© Grand Hotel Karel V 2025. Alle rechten voorbehouden.
forms:.title

Images

image-align (horzontal)

  • image-align-left

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

  • image-align-center

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

  • image-align-right

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

image-align (vertical)

  • With item-horizontal, it is possible to align the image

  • image-align-top

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

  • image-align-middle

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

  • image-align-bottom

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Image-cover

  • (default)

    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.

    More InfoMore Info
  • image-cover (landscape)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut

    More InfoMore Info
  • image-cover (portrait)

    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.

    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.

    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.

    More InfoMore Info
  • image-cover--left

    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.

    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.

    More InfoMore Info
  • image-cover--top

    Lorem ipsum dolor sit amet, consectetur adipiscing elit,

  • image-cover--bottom

    Lorem ipsum dolor sit amet, consectetur adipiscing elit,

  • image-cover--right

    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.

    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.

    More InfoMore Info

Image contain

  • (default)

    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.

    More InfoMore Info
  • image-contain (container lower)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    More InfoMore Info
  • image-contain (container higher)

    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.

    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.

    More InfoMore Info
  • image-contain--left

    Lorem ipsum dolor sit amet, consectetur adipiscing elit,

  • image-contain--top

    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.

    More InfoMore Info
  • image-contain--bottom

    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.

    More InfoMore Info
  • image-contain--right

    Lorem ipsum dolor sit amet, consectetur adipiscing elit,

Image overlay

  • image-overlay-dark

    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.

    More InfoMore Info
  • (default)

    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.

    More InfoMore Info
  • image-overlay-light

    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.

    More InfoMore Info

Image grayscale / color / onhover

  • Black and white filter on images

  • always applied, or on hover, or when not hovered

  • (default)

    More info
  • image-grayscale

    More info
  • image-onhover-grayscale

    More info
  • image-onhover-color

    More info

Image aspect ratio

  • Aspect ratios only work on content images, not on background images (image-cover or image-contain)

  • image-aspect-1x1

  • image-aspect-4x3

  • image-aspect-3x2

  • image-aspect-16x9

Image scale (for retina/hi-dpi devices)

  • Use higher quality images by uploading higher resolution images, and using a class to scale it back to it's original size

  • There will be no difference between the images on normal screens, but on retina/hi-dpi devices the 2nd and 3rd image will be sharper

  • (default)

    This image is 300px wide.

  • image-scale-2x

    This image is 600px wide -> scaled to 300px

  • image-scale-3x

    This image is 900px wide -> scaled to 300px

Videos

  • (default)

    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.

    More InfoMore Info
  • video-cover (landscape)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut

    More InfoMore Info
  • video-cover (portrait)

    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.

    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.

    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.

    More InfoMore Info

Video overlay

  • (video-overlay-dark)

    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.

    More InfoMore Info
  • (default)

    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.

    More InfoMore Info
  • (video-overlay-light)

    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.

    More InfoMore Info
  1. Homepage
  2. Styleguide
  3. Variable content
  4. Images-Videos