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
- ??
Section watermark - Alignment: Bottom right
Link text
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.
Section watermark - Alignment: Bottom left
Link textWatermark 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.
Section watermark - Alignment: Top left
Link text
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.
Section watermark - Alignment: Top right
Link text
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.
Section watermark - Alignment: Top left
Link text
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.
Section watermark - Alignment: Center, Watermark height: 100%, Watermark width: 100%
Link text
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.

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.

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.

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.

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.