Util Watermarks

Description

This page demonstrates use of watermarks or grafical elements on top of images, components & section backrgrounds.

Watermark options

  • Content
    • Desktop image
    • Mobile image

Positioning

  • Alignemnt
    • Top left: Default
    • Top right
    • Bottom Left
    • Bottom right
    • Center
  • Rotation
    • Default
    • Reverse - Reverse horizontal
    • Rotate - Rotate vertical
  • Media fill
    • Default
    • Width 100%, height auto
    • Height 100%, width auto
    • Width 100%, height 100% (Cover)

Sections & components where watermarks are availible

  • Content
    • All sections: where a section background and section-padding are set
    • All components with images
      • Hero: on top of image, video or slider
      • Media-box: on top of image, video or slider
      • Banner: on top of image, video or slider
      • Card: on top of image
      • Image component: on top of image
    • Other components
      • Footer
      • ??
Watermark alt
card portait image
Tag

Card: watermark on image (bottom right)

Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Ante metus dictum at tempor commodo ullamcorper a lacus.

Watermark alt
card portait image
Tag

Card: watermark on image (top left)

Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Ante metus dictum at tempor commodo ullamcorper a lacus.

Watermark alt
card portait image
Tag

Card: watermark on image (center)

Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Ante metus dictum at tempor commodo ullamcorper a lacus.

Watermark alt
card image

Card: watermark on image (top left)

Watermark alt

Card image: watermark on background color (bottom right)

Watermark alt

Card image: watermark on background color (center)

Watermark alt

Section watermark - Alignment: Bottom right

Link text
Watermark alt
media box image
Tag

Watermark alignment: Top left

Morbi tincidunt augue interdum velit euismod in pellentesque. Adipiscing tristique risus nec feugiat in fermentum. Orci nulla pellentesque dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo.This is a link.

Arrow styles link
Watermark alt

Section watermark - Alignment: Bottom left

Link text
Watermark alt
Tag

Watermark alignment: Top right

Morbi tincidunt augue interdum velit euismod in pellentesque. Adipiscing tristique risus nec feugiat in fermentum. Orci nulla pellentesque dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo.This is a link.

Arrow styles link
Watermark alt

Section watermark - Alignment: Top left

Link text
Watermark alt
media box image
Tag

Watermark alignment: bottom left

Morbi tincidunt augue interdum velit euismod in pellentesque. Adipiscing tristique risus nec feugiat in fermentum. Orci nulla pellentesque dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo.This is a link.

Arrow styles link
Watermark alt

Section watermark - Alignment: Top right

Link text
Watermark alt
media box image
Tag

Watermark alignment: bottom right

Morbi tincidunt augue interdum velit euismod in pellentesque. Adipiscing tristique risus nec feugiat in fermentum. Orci nulla pellentesque dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo.This is a link.

Arrow styles link
Watermark alt

Section watermark - Alignment: Top left

Link text
Watermark alt
media box image
Tag

Watermark alignment: Center

Morbi tincidunt augue interdum velit euismod in pellentesque. Adipiscing tristique risus nec feugiat in fermentum. Orci nulla pellentesque dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo.This is a link.

Arrow styles link
Watermark alt

Section watermark - Alignment: Center, Watermark height: 100%, Watermark width: 100%

Link text
Watermark alt
media box image
Tag

Watermark alignment: Top left, Watermark height: 100%

Morbi tincidunt augue interdum velit euismod in pellentesque. Adipiscing tristique risus nec feugiat in fermentum. Orci nulla pellentesque dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo.This is a link.

Arrow styles link
Watermark alt
media box image
Tag

Watermark alignment: Top left, Watermark height: 100%, Watermark width: 100%

Morbi tincidunt augue interdum velit euismod in pellentesque. Adipiscing tristique risus nec feugiat in fermentum. Orci nulla pellentesque dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo.This is a link.

Arrow styles link
Watermark alt
media box image
Tag

Media box: Watermark on section background

Morbi tincidunt augue interdum velit euismod in pellentesque. Adipiscing tristique risus nec feugiat in fermentum. Orci nulla pellentesque dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo.This is a link.

Arrow styles link
Watermark alt
media box image
Tag

Media box: Watermark on section background

Morbi tincidunt augue interdum velit euismod in pellentesque. Adipiscing tristique risus nec feugiat in fermentum. Orci nulla pellentesque dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo.This is a link.

Arrow styles link
Watermark alt
media box image
Tag

Media box: Watermark on background image

Kommuneplanen er den bærende og helt afgørende plan, hvor borgere og virksomheder kan orientere sig om mål og regler for arealanvendelsenThis is a link.

Arrow styles link
Watermark alt
media box image
Tag

Media box: Watermark on background image

Kommuneplanen er den bærende og helt afgørende plan, hvor borgere og virksomheder kan orientere sig om mål og regler for arealanvendelsenThis is a link.

Arrow styles link
Watermark alt
hero image

Hero text box: Watermark on background image

Kommuneplanen er den bærende og helt afgørende plan, hvor borgere og virksomheder kan orientere sig om mål og regler for arealanvendelsen.This is a link.

Watermark alt
media box image
Velkommen

Pre-text title: Highlighted pre-text field for title & introductory

Pre-text introductory: Velkommen til Børnehuset Villavej, hvor vi glæder os til at se børn og forældre i vores nye fine lokaler på Gl Kongevej.

Mere om bystrategi
Watermark alt
hero image

Default with title

Global styles

  • Roboto
  • Verdana
  • MaxLF-Regular
  • Open Sans
  • Georgia
  • Arial
  • Exo2
  • IBMPlexMono
  • Playfair Display
  • Fira Sans
  • Montserrat
  • Metropolis
  • Barlow
  • Poppins
  • Ice Cream Slant
  • ID00 Sans
  • ID00 Serif
  • Merriweather
  • Rubik
  • Alverata
  • Resolve
  • Resolve Nrw
  • DM Sans
  • Raleway
  • Bricolage Grotesque
  • Sora
  • Tropiline
  • Caveat
  • Flama
  • Inter
  • Lato
  • Mynerve

  • Inherits sizing from article body

  • Inherits sizing from H3

  • Small text transform

Component styles

  • Footer padding