Skip to main content

Global styles

Component styles

Spot boxes

Description

This page shows all option for the spot box. The spot box is a component, that can be used to hightlight important information like statistics, facts, quotes and so on. By default the spotbox is treated like a blockquote. If the spotbox is used for other purposes, the blockquote element should be removed.

Component options

  • Grid (Only on section pages)
    • Col 4
    • Col 8
    • Col 6
    • Col 12
  • Content alignment
    • Default (Left top)
    • Left
    • Center (Top)
    • Rigth
  • Background colors (Only on section pages)
    • Primary color
    • Secondary color

Content options

  • Spot imagery (You choose between them. Can't be combined)
    • Image (SVG, PNG og jpeg)
    • Icon (Choose from icon library)
    • Highlighted text (Text used as imagery)
  • Text
    • Blockquote or p-tag
    • Caption
  • Background colors (Only on section pages)
    • Primary color
    • Secondary color
  • Article element colors (Only on article pages)
    • Default (none)
    • Component color
    • Article element 0
    • Article element 1
    • Article element 2
    • Article element 3
    • Article element 4
    • Article element 5

Backlog - (Not implemented)

  • Block text
    • Title
    • Text
    • Caption

Old blockquote

Aside example with a blockquote. Du kan finde de seneste oplysninger om aktuelle og kommende udbud her.

Rex Hansen

Spot box - content options

Spot image

Blockquote default: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Block quote caption
Spot image

p-text: When spotbox i used for content that is not a quote(blockquote element removed)

Block quote caption
Spot image

Blockquote: image & content align left

Block quote caption

Blockquote: icon & content align center

Block quote caption

25%

Blockquote: imagery text & content align right

Block quote caption

Spot box - background color options (Sections)

Spot image

Blockquote: Default componenent color in Sections

Block quote caption

185

Blockquote: Component background color primary

Block quote caption

Blockquote: Component background color secondary

Block quote caption

Spot box - background color options (Article content)

Spot image

Blockquote: Default in Article content

Block quote caption

10%

Blocktext: Article componenent color default

4

Blockquote: Article componenent color 0

Blockquote caption

Blockquote: Article componenent color 1

Block quote caption
Spot image

Blockquote: Article componenent color 2

Blockquote: Article componenent color 3

Blockquote: Lorem ipsum dolor sit amet, consectetur adipiscing elit

250.000

Blockquote: Article componenent color 4

Blockquote: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Blockquote: Article componenent color 5

Block quote caption

Spot box component - full width with section background color

Blockquote: Default componenent color in Sections

Block quote caption

Backlog - (Not implemeted)

Spot image

Blocktext default

Blocktext body: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Blocktext caption
Spot image

Blocktext: image & content align right

Blocktext body: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Blocktext: icon & content align left

Blocktext body: Lorem ipsum dolor sit amet, consectetur adipiscing elit

2000

Blocktext: imagery text & content align center

Blocktext caption