MYDS Logo

    MYDS

    Beta

    Footer

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

    JataNegara
    Organization Title

    Sample Address Line 1, Sample Street Name, Sample Area, Sample District, Sample City, 12345 Sample Postal Code, Sample Country

    Follow Us

    Title 1

    Link 1

    Link 2

    Link 3

    Link 4

    Title 2

    Link 1

    Link 2

    Link 3

    Link 4

    Open Source

    Github Repo

    Figma

    All Rights Reserved © 2025

    Disclaimer

    Privacy Policy

    SourceStorybook

    Usage

    import {
  Address,
  Footer,
  FooterBottomSection,
  FooterCopyright,
  FooterContent,
  FooterMainInfo,
  FooterTimestamp,
  FooterTopSection,
  ImageWithTitle,
  SocialMedia,
  FooterCopyrightDate,
  FooterCopyrightLinkWrapper,
  FooterContentColumn,
  SocialMediaItem,
} from "@govtechmy/myds-react/footer";
import { Link } from "@govtechmy/myds-react/link";
import {
    FacebookIcon,
    TikTokIcon
} from "@govtechmy/myds-react/icon";
    export default () => (
  <Footer>
    <FooterTopSection>
      <FooterMainInfo>
        <ImageWithTitle
          imgSrc="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Coat_of_arms_of_Malaysia.svg/500px-Coat_of_arms_of_Malaysia.svg.png"
          imgAlt="JataNegara"
        >
          Organization Title
        </ImageWithTitle>
        <Address>
          Sample Address Line 1, Sample Street Name, Sample Area, Sample
          District, Sample City, 12345 Sample Postal Code, Sample Country
        </Address>
        <SocialMedia title="Follow Us">
          <SocialMediaItem
            icon={<FacebookIcon />}
            href={"www.google.com"}
            name={"Facebook"}
          />
          <SocialMediaItem
            icon={<TikTokIcon />}
            href={"www.google.com"}
            name={"TikTok"}
          />
        </SocialMedia>
      </FooterMainInfo>
      <FooterContent>
        <FooterContentColumn title={"Title 1"}>
          <Link
            href="www.google.com"
            underline="hover"
            className="hover:text-txt-black-900"
          >
            Link 1
          </Link>
          <Link
            href="www.google.com"
            underline="hover"
            className="hover:text-txt-black-900"
          >
            Link 2
          </Link>
          <Link
            href="www.google.com"
            underline="hover"
            className="hover:text-txt-black-900"
          >
            Link 3
          </Link>
          <Link
            href="www.google.com"
            underline="hover"
            className="hover:text-txt-black-900"
          >
            Link 4
          </Link>
        </FooterContentColumn>
        <FooterContentColumn title={"Title 2"}>
          <Link
            href="www.google.com"
            underline="hover"
            className="hover:text-txt-black-900"
          >
            Link 1
          </Link>
          <Link
            href="www.google.com"
            underline="hover"
            className="hover:text-txt-black-900"
          >
            Link 2
          </Link>
          <Link
            href="www.google.com"
            underline="hover"
            className="hover:text-txt-black-900"
          >
            Link 3
          </Link>
          <Link
            href="www.google.com"
            underline="hover"
            className="hover:text-txt-black-900"
          >
            Link 4
          </Link>
        </FooterContentColumn>
        <FooterContentColumn title={"Open Source"}>
          <Link
            href="www.google.com"
            underline="hover"
            className="hover:text-txt-black-900"
          >
            Github Repo
          </Link>
          <Link
            href="www.google.com"
            underline="hover"
            className="hover:text-txt-black-900"
          >
            Figma
          </Link>
        </FooterContentColumn>
      </FooterContent>
    </FooterTopSection>
    <FooterBottomSection>
      <FooterCopyright>
        <FooterCopyrightDate>All Rights Reserved</FooterCopyrightDate>
        <FooterCopyrightLinkWrapper>
          <Link
            href="www.google.com"
            underline="hover"
            className="hover:text-txt-black-900"
          >
            Disclaimer
          </Link>
          <Link
            href="www.google.com"
            underline="hover"
            className="hover:text-txt-black-900"
          >
            Privacy Policy
          </Link>
        </FooterCopyrightLinkWrapper>
      </FooterCopyright>
      <FooterTimestamp time="2024-12-05T10:00:00Z">
        Last Updated:
      </FooterTimestamp>
    </FooterBottomSection>
  </Footer>
);

    Main Wrapper: Footer

    The Footer serves as the primary container for the footer content. All subcomponents are nested within this wrapper. It is divided into two main sections:

    1. FooterTopSection
    2. FooterBottomSection

    1.FooterTopSection

    The FooterTopSection is the upper part of the footer and contains two main areas:

    1.1 FooterMainInfo
    1.2 FooterContent

    1.1 FooterMainInfo

    The FooterMainInfo area displays key organizational details. It includes the following components:

    1.1.1 ImageWithTitle

    Displays an image (e.g., logo) alongside a title.

    Example:

    JataNegara

    Organization Title

    1.1.2 Address

    Displays the physical address of the organization. Content: Added as plain text inside the component.

    Example:

    Sample Address Line 1, Sample Street Name, Sample Area, Sample District, Sample City, 12345 Sample Postal Code, Sample Country

    1.1.3 SocialMedia

    A container for social media links, with icons imported.

    Example:

    Follow Us

    1.2 FooterContent

    The FooterContent component is designed for grouping related links in a structured layout, typically organized into columns. Each column is represented by a FooterContentColumn, which includes a title and associated links.

    Example:

    Title 1

    Link 1

    Link 2

    Title 2

    Link 1

    Link 2

    2.FooterBottomSection

    The FooterBottomSection is the lower part of the footer. It contains the following:

    1.1 FooterCopyright
    1.2 FooterTimestamp

    2.1 FooterCopyright

    The FooterCopyright area displays copyright information and additional related links. It includes the following components:

    2.1.1 FooterCopyrightDate

    Displays a copyright statement with year

    Example:

    All Rights Reserved © 2025

    2.1.2 FooterCopyrightLinkWrapper

    A container for additional links, such as disclaimers or policies.

    Example:

    Disclaimer

    Privacy Policy

    2.2 FooterTimestamp

    Displays the last updated date and time.

    Example:

    Props

    Footer

    PropTypeDefault
    className
    string
    		-
    background
    string
    		-
    children
    ReactNode
    		-

    FooterTopSection

    PropTypeDefault
    className
    string
    		-
    children
    ReactNode
    		-

    FooterMainInfo

    PropTypeDefault
    className
    string
    		-
    children
    ReactNode
    		-

    ImageWithTitle

    PropTypeDefault
    imgSrc
    string
    		-
    imgAlt
    string
    		-
    className
    string
    		-
    children
    ReactNode
    		-

    Address

    PropTypeDefault
    className
    string
    		-
    children
    ReactNode
    		-

    SocialMedia

    PropTypeDefault
    title
    string
    		-
    className
    string
    		-
    children
    ReactNode
    		-

    SocialMediaItem

    PropTypeDefault
    icon
    ReactNode
    		-
    href
    string
    		-
    name
    string
    		-
    className
    string
    		-

    FooterContent

    PropTypeDefault
    children
    ReactNode
    		-

    FooterContentColumn

    PropTypeDefault
    title
    string
    		-
    children
    ReactNode
    		-

    FooterBottomSection

    PropTypeDefault
    className
    string
    		-
    children
    ReactNode
    		-

    FooterCopyright

    PropTypeDefault
    className
    string
    		-
    children
    ReactNode
    		-

    FooterCopyrightDate

    PropTypeDefault
    className
    string
    		-
    children
    ReactNode
    		-

    FooterCopyrightLinkWrapper

    PropTypeDefault
    className
    string
    		-
    children
    ReactNode
    		-

    FooterTimestamp

    PropTypeDefault
    time
    string | number | Date
    		-
    className
    string
    		-
    children
    ReactNode
    		-

    Previous

    Dropdown

    Next

    Input

    On this page

    UsageMain Wrapper: Footer1.FooterTopSection1.1 FooterMainInfo1.1.1 ImageWithTitle1.1.2 Address1.1.3 SocialMedia1.2 FooterContent2.FooterBottomSection2.1 FooterCopyright2.1.1 FooterCopyrightDate2.1.2 FooterCopyrightLinkWrapper2.2 FooterTimestampPropsFooterFooterTopSectionFooterMainInfoImageWithTitleAddressSocialMediaSocialMediaItemFooterContentFooterContentColumnFooterBottomSectionFooterCopyrightFooterCopyrightDateFooterCopyrightLinkWrapperFooterTimestamp