Accessibility: Not Needed

Translations: Not Needed

Migration Guide: Not Needed

Section Footer

The Section Footer component provides a standardized footer section with customizable padding, divider, and size options. It supports left and right action slots for buttons or other content.

With Horizontal and vertical padding

Vue

html

<template>
  <HLSectionFooter id="footer-1">
    <HLSectionFooterItem justify="start">
      <HLButton size="sm" id="btn-1" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>
<script setup>
  import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

Without top padding

Vue

html

<template>
  <HLSectionFooter :topPadding="false" id="footer-2">
    <HLSectionFooterItem justify="start">
      <HLButton size="sm" id="btn-2" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>
<script setup>
  import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

Without bottom padding

Vue

html

<template>
  <HLSectionFooter :bottomPadding="false" id="footer-3">
    <HLSectionFooterItem justify="start">
      <HLButton size="sm" id="btn-3" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>
<script setup>
  import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

Without both top and bottom padding

Vue

html

<template>
  <HLSectionFooter :topPadding="false" :bottomPadding="false" id="footer-4">
    <HLSectionFooterItem justify="start">
      <HLButton size="sm" id="btn-4" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>
<script setup>
  import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

Without Horizontal padding

Vue

html

<template>
  <HLSectionFooter :horizontalPadding="false" id="footer-5">
    <HLSectionFooterItem justify="start">
      <HLButton size="sm" id="btn-5" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>
<script setup>
  import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

With divider

Vue

html

<template>
  <HLSectionFooter :divider="true" id="footer-6">
    <HLSectionFooterItem justify="start">
      <HLButton size="sm" id="btn-6" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>
<script setup>
  import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

Actions on the Left

Vue

html

<template>
  <HLSectionFooter id="footer-7">
    <HLSectionFooterItem justify="start">
      <div style="display:flex;gap:12px;">
        <HLButton size="xs" id="btn-7">Learn more</HLButton>
        <HLButton size="xs" id="btn-8">Skip</HLButton>
      </div>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end"></HLSectionFooterItem>
  </HLSectionFooter>
</template>
<script setup>
  import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

Actions on the Right

Vue

html

<template>
  <HLSectionFooter id="footer-8">
    <HLSectionFooterItem justify="end">
      <div style="display:flex;gap:12px;">
        <HLButton id="btn-9">Learn more</HLButton>
        <HLButton id="btn-10">Skip</HLButton>
      </div>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>
<script setup>
  import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

All sizes

Vue

html

<template>
  <HLSectionFooter size="sm" id="footer-13">
    <HLSectionFooterItem justify="start">
      <HLButton size="3xs" id="btn-12" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>

  <HLSectionFooter size="md" id="footer-14">
    <HLSectionFooterItem justify="start">
      <HLButton size="2xs" id="btn-13" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>

  <HLSectionFooter size="lg" id="footer-15">
    <HLSectionFooterItem justify="start">
      <HLButton size="sm" id="btn-14" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>
<script setup>
  import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

With Custom Button Sizes

Vue

html

<HLSectionFooter id="footer-1">
  <HLSectionFooterItem justify="start">
    <HLButton size="2xs" id="btn-1" variant="text" link>
      <HLText size="2xl" weight="semibold">Learn more</HLText>
    </HLButton>
  </HLSectionFooterItem>
  <HLSectionFooterItem justify="end">
    <HLButton id="ghost" size="2xs" variant="ghost">
      <HLText size="2xl" weight="semibold">Tertiary </HLText>
    </HLButton>
    <HLButton id="secondary" size="2xs" variant="secondary">
      <HLText size="2xl" weight="semibold">Secondary </HLText>
    </HLButton>
    <HLButton id="primary" size="2xs" variant="primary" color="blue">
      <HLText size="2xl" weight="semibold">Primary </HLText>
    </HLButton>
  </HLSectionFooterItem>
</HLSectionFooter>

Imports

import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'

Props

Section Footer

Name	Type	Default	Description
id *	`string \| undefined`	`undefined`	The `id` of the element
horizontalPadding	`boolean`	`true`	Enable horizontal padding
topPadding	`boolean`	`true`	Enable top padding
bottomPadding	`boolean`	`true`	Enable bottom padding
divider	`boolean`	`false`	Show divider line
size	`'sm' \| 'md' \| 'lg'`	`'lg'`	Size of the footer

Section Footer Item

Name	Type	Default	Description
id *	`string \| undefined`	`undefined`	The `id` of the element
justify	`'start' \| 'end' \| 'center' \| 'space-between' \| 'space-around' \| 'space-evenly'`	`end`	position of items in footer

Slots

Section Footer

Name	Parameters	Description
default	`()`	The default content slot

Section Footer Item

Name	Parameters	Description
default	`()`	The default content slot

Section Footer ​

With Horizontal and vertical padding ​

Without top padding ​

Without bottom padding ​

Without both top and bottom padding ​

Without Horizontal padding ​

With divider ​

Actions on the Left ​

Actions on the Right ​

All sizes ​

With Custom Button Sizes ​

Imports ​

Props ​

Section Footer ​

Section Footer Item ​

Slots ​

Section Footer ​

Section Footer Item ​

Section Footer

With Horizontal and vertical padding

Without top padding

Without bottom padding

Without both top and bottom padding

Without Horizontal padding

With divider

Actions on the Left

Actions on the Right

All sizes

With Custom Button Sizes

Imports

Props

Section Footer

Section Footer Item

Slots

Section Footer

Section Footer Item