Media boxes
Description
Media boxes are 50/50 components with text content in one half and media content in the other half.
Text content options
- Tag
- Title
- Rich-text
- Background color
- Primary color
- Secondary color
- Transparent (can only be used on media-box equal heights)
Media content options
- Image
- Background color (not implemented)
- Background video
- Watermark
Grid options
- Container wide (full width)
- Full width & full height (this option needs to be moved to heros)
- Equals heights
- Displaced
Positioning
- Reverse - Reverse horizontal
Section backgrounds
Can not be used on container wide (full width) components
- Primary decorative
- Secondary decorative
Global styling options
- Global styling for buttons (you can insert multiple button styled links)
- Default: Button link - arrow long
- Button filled
- Global background styling for full width option (Only effects full width option & similar looking heros)
- Default: Framed
- Overlay
Media box - text box only
Media box - text box only - .bg--primary
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.
Pre-text title: Media box - text box only - .bg--secondary
Pre-text introductory: 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.
Media box - text box only
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 - text box only
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 - text box only: If only one box is filled
Media box - text box only - .bg--primary
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 equal heights
Media box equal heights
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 equal heights - .bg--primary
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 equal heights - .bg--secondary
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 equal heights - .bg--transparent
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 equal heights - .bg--transparent
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 equal heights- .bg--transparent & with searchbar
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 equal heights- .bg--transparent & with searchbar
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 equal heights- .bg--transparent & with searchbar
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 equal heights- .bg--default & with searchbar
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 equal heights
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 equal heights + multiple buttons/links
Media box equal heights
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 equal heights
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.
.bg--primary & buttons
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.
.bg--secondary & buttons
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 equal heights - with searchbar
Media box equal heights - with searchbar
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 equal heights - reverse
Media box equal heights - reverse
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 equal heights - with 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 equal heights - .container-fluid
Media box equal heights - .container-fluid
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 equal heights - .container-fluid & reverse
Media box equal heights - .container-fluid & reverse
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 equal heights - .container-fluid & with search bar
Media box equal heights - .container-fluid & with search bar
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 displaced - image + reverse
Media box displaced - Reversed
Dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo. 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 displaced - Transparent(bg--inherit-bg-main)
Media box displaced - Transparent(bg--inherit-bg-main)
Dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo. 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 displaced - With section background
Dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo. 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 displaced - With section background & bg--transparent
Dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo. 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 displaced - filled button
Dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo. 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 with search bar
Dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo. 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 with search bar & secondary bg with autocomplete suggestions
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 with search bar, reversed & secondary bg
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 full width
Media box full width
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.
Media box full width - with filled button
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.
Media box full width - with searchbar with suggestions autocomplete
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.
Media box full width - reverse
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.
Media box full width - Global background style option: Overlay
Media box full width
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.
Media box full width - reverse
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.
Media box full width - .bg--primary or .bg--secondary does not get overlay
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.
Media box: background-video
Media box equal heights: background-video
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.
Watermarks
Media box: watermark
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: background-video & watermark
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: background-carousel & watermark
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.