Description

Overview over all footers options. Footers are grid based and all share same content options & all global styling options for the grid and content. Footers can be build dynamically with all the features listed below. With the new version of the footer, all other previous footers can now be buildt with this one. Old footer grids will still be referenced for documentation.

Content columns

• Content column: col-3, col-4, col-6
• Content two column: col-6(col-6)
• Optional offset column for spacing: 1-12

Footer grid options

• Flex order mobile:Class used to change order of columns on mobile. Use case is mostly in combination with column align right.
• Column alignment:
  • Default (left)
  • Right
• Margin-bottom
  • Content column (mb--medium)
  • Content (mb--xsmall)

Global footer options

• Content (Content columns)
  • Image logo or text logo
  • Rich-text
    • CTA
  • Link list
  • Double link list (column-count-2)
  • Link list icons
  • Form subscribe
• Sub footer
  • Column alignment:
    • Default (left)
    • Center
    • Right
• Watermark
  • Left or right align
  • Desktop & mobile

Styling

• Font sizing
  • Titles: initial(h3) or content(component) font size
  • Address field column: initial, enlarge font size x1.5 or x2
  • Content columns: initial, or enlarge font size x1.5 or x2
• Link styling
  • Default: underline on hover
  • Arrow styled links
  • Underlined links
• Padding variables - top & bottom

Responsive options

• Global feature: Content columns dropdown on mobile
  • Titles: Hide on desktop