Nuxt•3mo ago

NuxtUI Card

How can I align the footer so that it is always at the same height, even if the content of one card is longer?

2 Replies

Hi @StormOfGalaxy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The NuxtUI Card component provides slot-based structure for header, body, and footer, and you can customize its layout using the ui prop or by overriding its theme in your configuration. However, the official documentation does not explicitly describe a built-in prop or method to force the footer to always align at the same height across multiple cards with varying content lengths. That said, the default theme for the Card component uses a flex column layout for the card body, which you can leverage. To ensure the footer is always at the bottom, you can apply a utility class like flex flex-col h-full to the card root and mt-auto to the footer slot, so the footer pushes to the bottom regardless of the body content height. You can do this by customizing the ui prop or the theme:

<template>
  <UCard :ui="{ root: 'flex flex-col h-full', footer: 'mt-auto' }">
    <template #header>
      <Placeholder class="h-8" />
    </template>

    <Placeholder class="h-32" />

    <template #footer>
      <Placeholder class="h-8" />
    </template>
  </UCard>
</template>

<template>
  <UCard :ui="{ root: 'flex flex-col h-full', footer: 'mt-auto' }">
    <template #header>
      <Placeholder class="h-8" />
    </template>

    <Placeholder class="h-32" />

    <template #footer>
      <Placeholder class="h-8" />
    </template>
  </UCard>
</template>

Or, to apply this globally, update your app.config.ts:

export default defineAppConfig({
  ui: {
    card: {
      slots: {
        root: 'flex flex-col h-full',
        footer: 'mt-auto'
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    card: {
      slots: {
        root: 'flex flex-col h-full',
        footer: 'mt-auto'
      }
    }
  }
})

This approach uses Tailwind CSS utility classes and is compatible with the slot-based theming described in the documentation. It ensures the footer is always pushed to the bottom of the card, even if the body content varies in length. For more on customizing slots and themes, see the Nuxt UI theme documentation and Card component theme section. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@835766998008594434> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

NuxtUI Card

Did you find this page helpful?