Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Footer

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Container for display information usually at the bottom of the page or section.

import { Footer } from '@kubit-ui-web/react-components'
12345
<Footer
  variant={'DEFAULT'}
>
  <div data-position={'RIGHT'}>Right Content</div>
</Footer>

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefine style for its quick use, access them through the variant prop:

123456
<Footer
  variant={'DEFAULT'}
>
  <div data-position={'LEFT'}>Left Content</div>
  <div data-position={'RIGHT'}>Right Content</div>
</Footer>

Positioning of children

This component only require to add the content displayed inside through the children prop, setting the placement of each element in the data-position property. Also, other props can be used for further customization, such as forceVertical for defining the direction of the content. More props can be check in the code api window.

12345678
<Footer
  variant={'DEFAULT'}
  forceVertical={true}
>
  <div data-position={'LEFT'}>Left Content</div>
  <div data-position={'CENTER'}>Center Content</div>
  <div data-position={'RIGHT'}>Right Content</div>
</Footer>
CarouselAccessibility
FooterDesign Specs