Application Footer

Examples

Basic

<ods-application-footer></ods-application-footer>

import { OdsApplicationFooter } from '@ods/components/react.application-footer';

const Example = () => {
  return (
    <OdsApplicationFooter></OdsApplicationFooter>
  )
};

export default Example;

Basic, Content Region

Use the content-region slot to add additional content to the right of the copyright statement. A divider is automatically added when the content-region slot is populated.

<ods-application-footer>
  <div slot="content-region"><a class="demo-footer-link" ods-text="link" href="/">Service Status</a></div>
</ods-application-footer>

<style>
  .demo-footer-link {
    text-decoration: none;
    color: var(--ods-sys-color-on-surface);
  }

  .demo-footer-link:hover {
    text-decoration: underline;
  }
</style>

import { OdsApplicationFooter } from '@ods/components/react.application-footer';

const css = `
  .demo-footer-link {
    text-decoration: none;
    color: var(--ods-sys-color-on-surface);
  }

  .demo-footer-link:hover {
    text-decoration: underline;
  }
`

const Example = () => {
  return (
    <>
      <OdsApplicationFooter>
        <div slot="content-region"><a className="demo-footer-link" ods-text="link" href="/">Service Status</a></div>
      </OdsApplicationFooter>

      <style>{css}</style>
    </>
  )
};

export default Example;

Stacked

Stacked should be used with small viewport dimensions, like on a mobile device. Use the Basic variants for larger viewport dimensions on Desktop and Tablet.

<ods-application-footer variant="stacked"></ods-application-footer>

import { OdsApplicationFooter } from '@ods/components/react.application-footer';

const Example = () => {
  return (
    <OdsApplicationFooter variant="stacked"></OdsApplicationFooter>
  )
};

export default Example;

Stacked, Content Region

Use the *content-region slot to add additional content to the right of the copyright statement. A divider is automatically added when the content-region slot is populated.

<ods-application-footer variant="stacked">
  <div slot="content-region"><a class="demo-footer-link" ods-text="link" href="/">Service Status</a></div>
</ods-application-footer>

<style>
  .demo-footer-link {
    text-decoration: none;
    color: var(--ods-sys-color-on-surface);
  }

  .demo-footer-link:hover {
    text-decoration: underline;
  }
</style>

import { OdsApplicationFooter } from '@ods/components/react.application-footer';

const css = `
  .demo-footer-link {
    text-decoration: none;
    color: var(--ods-sys-color-on-surface);
  }

  .demo-footer-link:hover {
    text-decoration: underline;
  }
`

const Example = () => {
  return (
    <>
      <OdsApplicationFooter variant="stacked">
        <div slot="content-region"><a ods-text="link" href="/">Service Status</a></div>
      </OdsApplicationFooter>

      <style>{css}</style>
    </>
  )
};

export default Example;

Importing

import '@ods/components/web.application-footer';

import { OdsApplicationFooter } from '@ods/components/react.application-footer';

import { OdsApplicationFooter } from '@ods/components/react.application-footer';