Footer base

In progress

Footer base displays logo, text content, social media links, copyright text and shortcut links.

P.O. Box 4
(Yliopistonkatu 3)
00014 University of Helsinki

Switchboard:
+358 (0) 2941 911 
<hy-footer>
  <hy-footer-base
    logo-label="University of Helsinki"
    logo-url="/"
    some-label="Follow us"
    copyright-text="© University of Helsinki 2020"
    data-footer-base-links='[
      {"label": "People finder", "url": "#"},
      {"label": "Press and media", "url": "#"},
      {"label": "Opening hours", "url": "#"},
      {"label": "Flamma", "url": "#"},
      {"label": "Library", "url": "#"},
      {"label": "Webshop", "url": "#"},
      {"label": "About website", "url": "#"},
      {"label": "Data protection", "url": "#"},
      {"label": "More Data protection", "url": "#"},
      {"label": "Accessibility", "url": "#"},
      {"label": "Give feedback", "url": "#"}
    ]'
    data-footer-base-some='[
    {"label": "Follow us on Facebook", "url": "#", "type": "facebook"},
      {"label": "Follow us on Twitter", "url": "#", "type": "twitter"},
      {"label": "Follow us on Youtube", "url": "#", "type": "youtube"},
      {"label": "Follow us on LinkedIn", "url": "#", "type": "linkedin"},
      {"label": "Follow us on Instagram", "url": "#", "type": "instagram"}
    ]'
  
  >
    <div slot="content">
      P.O. Box 4<br>
      (Yliopistonkatu 3)<br>
      00014 University of Helsinki<br>
      <br>
      Switchboard:<br>
      +358 (0) 2941 911
    </div>
  </hy-footer-base>
</hy-footer>

# Properties

Property Attribute Description Type Default
color color Link item color FooterLinkItemColor.black \| FooterLinkItemColor.white FooterLinkItemColor.white
copyrightText copyright-text Copyright text string undefined
dataFooterBaseLinks data-footer-base-links Footer links to be displayed FooterBaseLinks[] \| string undefined
dataFooterBaseSome data-footer-base-some Footer some links FooterBaseSome[] \| string undefined
logoLabel logo-label Logo label string undefined
logoUrl logo-url Logo url string undefined
size size Logo size SiteLogoSize.big \| SiteLogoSize.large \| SiteLogoSize.small SiteLogoSize.big
someLabel some-label Label for some links string undefined

# Dependencies

# Depends on

# Graph

graph TD;
  hy-footer-base --> hy-site-logo
  hy-footer-base --> hy-icon
  hy-footer-base --> hy-footer-link-item
  hy-site-logo --> hy-icon
  hy-footer-link-item --> hy-icon
  hy-footer-link-item --> hy-heading
  style hy-footer-base fill:#f9f,stroke:#333,stroke-width:4px

Helsinki University Design System

← Footer info →