Footer

<ahi-footer> | AhiFooter

The footer is a block of designated space for providing additional information or actions that are positioned below the main content.

Default

Primary

<ahi-footer>
  <div class="ahi-row ahi-align-items-center ahi-justify-content-space-between">
    <div class="ahi-row ahi-gap-2 ahi-justify-content-end">
      <ahi-button>Default</ahi-button>
      <ahi-button variant="primary">Primary</ahi-button>
    </div>
  </div>
</ahi-footer>

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/footer/footer.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/footer/footer.js';

Slots

Name	Description
(default)	The footer content

Learn more about using slots.

Properties

Name	Description	Type	Default
`size`	Controls the size of the footer component.	`'m' \| 's'`	`'m'`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.

Custom Properties

Name	Description	Default
`--ahi-footer-padding-inline`	Controls the inline padding around the footer’s main slot.	var(–ahi-space-6)
`--ahi-footer-box-shadow`	Controls the box shadow of the footer.	var(–ahi-shadow-base)
`--ahi-footer-background-color`	Controls the background color of the footer.	var(–ahi-surface)

Learn more about customizing CSS custom properties.