Footer

The Footer component is a standardized footer for Malaysian government websites.

Usage

Import

import {
  Footer,
  SiteInfo,
  FooterSection,
  SiteLinkGroup,
  SiteLink,
  FooterLogo,
} from "@govtechmy/myds-react/footer";

Anatomy

export default () => (
  <Footer>
    <FooterSection>
      <SiteInfo>
        <FooterLogo />
      </SiteInfo>
      <SiteLinkGroup>
        <SiteLink />
      </SiteLinkGroup>
    </FooterSection>
  </Footer>
);

Examples

FooterSection

FooterSection is a grid-based layout container that organizes and partition footer content and provides the responsive behavior.

SiteInfo

An aside HTML component designed to contain brand information, contact details, and social media links in the footer.

SiteLinkGroup

A container that structures a collection of links (SiteLink) into a titled group with responsive column layout.

Super super long long long long long long long long title

Props

Footer

Prop	Type	Default
`children`	`ReactNode`	-
`className`	`string`	-

FooterSection

Prop	Type	Default
`children`	`ReactNode`	-
`className`	`string`	-

SiteInfo

Prop	Type	Default
`children`	`ReactNode`	-
`className`	`string`	-

SiteLinkGroup

Prop	Type	Default
`children`	`ReactNode`	-
`className`	`string`	-
`groupTitle`	`ReactNode`	-
`linkCount`	`number`	`8`

FooterLogo

Prop	Type	Default
`className`	`string`	-
`logoTitle`	`ReactNode`	-
`logo`	`ReactNode`	-

SiteLink

Prop	Type	Default
`className`	`string`	-
`children`	`ReactNode`	-
`asChild`	`boolean`	`false`

MYDS

Footer

Usage

Examples

FooterSection

SiteInfo

SiteLinkGroup

Super super long long long long long long long long title

Props

Footer

FooterSection

SiteInfo

SiteLinkGroup

FooterLogo

SiteLink

On this page