Skip to main content

Global styles

Component styles

Util All lists

Description

These footer grid options, are primarily trageted around the placement of the brand & are global options that can be used for all grid types.

Be aware that the color styling can change depending on the main background color.

List types

  • Lists default
    • Ordered list
    • Unordered list
    • Unordered list - .rich-text
    • List Bullets - Mixin
  • List arrow
    • List links - Arrows - Mixin
    • Link list - with title & active link state
  • List download
    • List download - no icon
    • List download - with download icon
  • List icon
    • List icon (SVG)
    • List icons (font)
    • List links icon (font)
    • List links icon (SVG) - with embeded list
    • List icons (SVG) - with dividers
    • List icons (font) - with dividers
    • ist links icon (font) - with dividers
    • List links icon (SVG) - with dividers & embeded list
  • List group
    • List group
    • List group - with divider
  • List info
  • List news

List icons

  • Short: .list-icon-arrow-short
  • Long: .list-icon-arrow-long
  • Medium: .list-icon-arrow-medium
  • Sharp: .list-icon-arrow-sharp
  • Sharp thick: .list-icon-arrow-short
  • Short circle outline: .list-icon-arrow-short-circle-outline
  • Medium circle outline: .list-icon-arrow-medium-circle-outline

List - Types

Ordered list

  1. Level 1 ordered list item
  2. Level 1 ordered list item lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum lectus nibh, sed commodo nunc bibendum in. Curabitur accumsan lacus justo.
  3. Level 1 ordered list item
    1. Level 2 ordered list item
    2. Level 2 ordered list item
    3. Level 2 ordered list item
      1. Level 3 ordered list item
      2. Level 3 ordered list item
      3. Level 3 ordered list item
  4. Level 1 ordered list item
  5. Level 1 ordered list item
  6. Level 1 ordered list item

Unordered list

  • Level 1 ordered list item
  • Level 1 ordered list item lorem ipsum dulor sit amet, consectetur adipiscing elit. Sed rutrum lectus nibh, sed commodo nunc bibendum in. Curabitur accumsan lacus justo.
  • Level 1 ordered list item
    • Level 2 ordered list item
    • Level 2 ordered list item
    • Level 2 ordered list item
      • Level 3 ordered list item
      • Level 3 ordered list item
      • Level 3 ordered list item

Unordered list - .rich-text

List Bullets - Mixin

List download - with rich-text description

Download links list with with rich-text description

This could be a rich-text description

List icon (SVG)

  • 10. - 15. aug. 2019
  • 09.00 - 15.00
  • København

List icons (font)

  • 10. - 15. aug. 2019
  • 09.00 - 15.00
  • København
  • Website og mere tekst for at gøre sætningen virkelig lang

List links icon (SVG) - with embeded list

    • 10. - 15. aug. 2019
    • 15. - 19. maj. 2020
    • 13. dec. 2023
    • See all dates on page
  • 09.00 - 15.00
  • København

List icons (SVG) - with dividers

  • 10. - 15. aug. 2019
  • 09.00 - 15.00
  • København

List icons (font) - with dividers

  • MitID
  • Instagram
  • Facebook

List links icon (SVG) - with dividers & embeded list

    • 10. - 15. aug. 2019
    • 15. - 19. maj. 2020
    • 13. dec. 2023
    • See all dates on page
  • 09.00 - 15.00
  • København

List group

Same styling as info-box__links-extended__list - make global

List group - with dividers

Same styling as info-box__links-extended__list - make global

List info

  • Duration1 day
  • Membership price 11.615,00
  • Membership price 21.615,00
  • Non-member price2.150,00

List advanced: Title link and text

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

List advanced: Title link, text & img

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

List advanced: Title link, text, img & img border-radius

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

List advanced: Title link, text, img & img round

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

List advanced: Title link, text, img & flex wrap 4 items

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

  • Title: Has link

    Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non.

Lists in article content

With spanDuis aute irure dolor in reprehenderit udlejningsløbehjul. udlejningsløbehjul. udlejningsløbehjul. udlejningsløbehjul.

  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa.
  3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  4. Duis aute irure dolor in reprehenderit.
  5. Lorem ipsum dolor sit amet

Links

References

Documents accordion