Footer info

In progress

Footer info has content area with title, text and link button. On other side a list of links can be displayed.

<hy-footer>
  <hy-footer-info
    text-title="Campuses"
    text-description="University operates on four campuses in Helsinki and nine other locations."
    link-text="See all"
    link-url="www.google.com"
    data-footer-info-links='[
      {"label": "City Centre Campus", "url": "#", "mainlink": true,
        "items": [
          {"label": "Faculti of Educational Sciences", "url": "#"},
          {"label": "Faculti of Educational Theology", "url": "#"},
          {"label": "Faculti of Educational Arts", "url": "#"},
          {"label": "Faculti of Educational Sociology", "url": "#"},
          {"label": "Faculti of Educational Medicine", "url": "#"},
          {"label": "Faculti of Educational Law", "url": "#"}
        ]
      },
      {"label": "Kumpula Campus", "url": "#", "mainlink": true,
        "items": [
          {"label": "Faculti of Educational Sciences", "url": "#"}
        ]
      },
      {"label": "Meilahti Campus", "url": "#", "mainlink": true,
        "items": [
          {"label": "Faculti of Educational Sciences", "url": "#"}
        ]
      },
      {"label": "Viikki Campus", "url": "#", "mainlink": true,
        "items": [
          {"label": "Faculti of Educational Sciences", "url": "#"},
          {"label": "Faculti of Educational Arts", "url": "#"},
          {"label": "Faculti of Educational Medicine", "url": "#"},
          {"label": "Faculti of Educational Social theory", "url": "#"}
        ]
      }
    ]'
  ></hy-footer-info>
</hy-footer>

# Properties

Property Attribute Description Type Default
dataFooterInfoLinks data-footer-info-links Data for links to be displayed. FooterInfoLinks[] \| string undefined
linkText link-text Content area link button text. string undefined
linkUrl link-url Content area link button url. string undefined
textDescription text-description Content area text. string undefined
textTitle text-title Content area title. string undefined

# Dependencies

# Depends on

# Graph

graph TD;
  hy-footer-info --> hy-heading
  hy-footer-info --> hy-button
  hy-footer-info --> hy-accordion-container
  hy-footer-info --> hy-accordion-item
  hy-footer-info --> hy-footer-link-item
  hy-button --> hy-icon
  hy-accordion-container --> hy-box
  hy-accordion-item --> hy-icon
  hy-accordion-item --> hy-box
  hy-footer-link-item --> hy-icon
  hy-footer-link-item --> hy-heading
  style hy-footer-info fill:#f9f,stroke:#333,stroke-width:4px

Helsinki University Design System

← Grid →