ProComponentsLanding

LandingSection

A customizable section for your landing pages.

Usage

The LandingSection component will wrap your content in a Container but the wrapper takes the full width of the screen so you can easily change the background.

Use the headline, title and description props to customize the content of the section.

Pro

The freedom to build anything

Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases.

<ULandingSection
  headline="Pro"
  title="The freedom to build anything"
  description="Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases."
/>

Use the icon prop to add an icon on top of the title.

The freedom to build anything

Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases.

<ULandingSection
  icon="i-heroicons-rocket-launch"
  title="The freedom to build anything"
  description="Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases."
/>

You can add anything you want in the default slot, an image, a code-block using the MDC component (when using @nuxt/content), a LandingGrid, a PageGrid, a PricingGrid, a LandingFAQ, a LandingCTA, etc.

You can change the align prop from center to left or right to position the slot horizontaly.

Pro

The freedom to build anything

Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases.

<ULandingSection
  headline="Pro"
  title="The freedom to build anything"
  description="Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases."
  align="center"
>
  <img
    src="https://picsum.photos/640/360"
    class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
  />
</ULandingSection>

Use the links prop to add some Buttons below the description. Those will be rendered below the default slot when the align prop is set to center.

The freedom to build anything

Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases.

<ULandingSection
  title="The freedom to build anything"
  description="Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases."
  :links="[{ label: 'Explore components', color: 'gray', trailing-icon: 'i-heroicons-arrow-right', size: 'lg' }]"
  align="left"
>
  <img
    src="https://picsum.photos/360/640"
    class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
  />
</ULandingSection>

Use the features prop to add a list of features below the description. Those will be rendered as a grid when the align prop is set to center.

The freedom to build anything

Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases.

Fully customizable
Like Nuxt UI, change the style of any component from your App Config or customize them specifically through the ui prop.
Slots for everything
Each component leverages the power of Vue's slots to give you the flexibility to build anything.
<ULandingSection
  title="The freedom to build anything"
  description="Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases."
  :features="[{ name: 'Fully customizable', description: 'Like Nuxt UI, change the style of any component from your App Config or customize them specifically through the ui prop.', icon: 'i-heroicons-wrench-screwdriver' }, { name: 'Slots for everything', description: 'Each component leverages the power of Vue's slots to give you the flexibility to build anything.', icon: 'i-heroicons-square-3-stack-3d' }]"
  align="right"
>
  <img
    src="https://picsum.photos/360/640"
    class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
  />
</ULandingSection>

You can also use the #headline, #title, #description and #links slots to customize the content of the section. This can be quite useful when using @nuxt/content if your content has HTML for example:

content/index.yml
feature:
  title: The freedom to build anything
  description: Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases.
  code: |
    ```vue [app.vue]
    <template>
      <UHeader :links="links" />

      <UMain>
        <ULandingHero title="Hello World" />

        <ULandingSection title="Features">
          <UPageGrid>
            <ULandingCard title="First Card" />
            <ULandingCard title="Second Card" />
            <ULandingCard title="Third Card" />
          </UPageGrid>
        </ULandingSection>
      </UMain>

      <UFooter />
    </template>
    ```
We're using .yml files as an example here but you can use any format supported by @nuxt/content like .md or .json.
pages/index.vue
<script setup>
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>

<template>
  <ULandingSection>
     <template #title>
      <span v-html="page.feature.title" />
    </template>

    <template #description>
      <span v-html="page.feature.description" />
    </template>

    <MDC
      v-if="page.feature.code"
      :value="page.feature.code"
      tag="pre"
      class="prose prose-primary dark:prose-invert max-w-none"
    />
  </ULandingSection>
</template>

You can use the slot prop to change the default slot name, this can be useful when using @nuxt/content and iterating over a list of sections for example:

content/index.yml
sections:
  - title: 'The power of<br><span class="text-primary">Vue Components</span>'
    description: 'We love Vue Single-File Components as much as you do.'
    class: 'dark bg-gray-900'
    align: left
    slot: code
    code: |
      ```vue [app.vue]
      <template>
        <NuxtPage />
      </template>
      ```
  - title: 'Compose with<br><span class="text-primary">everything you need.</span>'
    slot: features
    features:
      - title: 'Routing & Layouts'
        description: 'File based routing system to build complex views and interfaces with a powerful and conventional approach.'
        icon: 'i-ph-signpost-duotone'
        to: '/docs/getting-started/routing'
      - title: 'Data Fetching'
        description: 'Composables that run on the server to fetch data for your components and enable you to render content in different ways.'
        icon: 'i-ph-plugs-connected-duotone'
        to: '/docs/getting-started/data-fetching'
      - title: 'Assets & Style'
        description: 'Image, Font and Script optizations with a built-in support for CSS Modules, Sass, PostCSS, CSS-in-JS and more.'
        icon: 'i-ph-image-duotone'
        to: '/docs/getting-started/styling'
pages/index.vue
<script setup>
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>

<template>
  <ULandingSection v-for="(section, index) of page.sections" :key="index" :slot="section.slot" :class="section.class" :align="section.align" :links="section.links">
    <template #title>
      <span v-html="section.title" />
    </template>

    <template #description>
      <span v-if="section.description" v-html="section.description" />
    </template>

    <template #code>
      <MDC :value="section.code" tag="pre" class="prose prose-primary dark:prose-invert max-w-none" />
    </template>

    <template #features>
      <UPageGrid>
        <UPageCard v-for="(feature, index) in features" :key="index" v-bind="feature" />
      </UPageGrid>
    </template>
  </ULandingSection>
</template>

You can use the #top and #bottom slots to add content above and below the container, this can be useful when adding some absolute positioned svgs for example.

Slots

top
{}
headline
{}
title
{}
description
{}
links
{}
bottom
{}

Props

icon
string
undefined
ui
{}
{}
description
string
undefined
links
(Button & { click?: Function; })[]
[]
title
string
""
align
"left" | "right" | "center"
"center"
headline
string
undefined
features
{ icon?: string; name: string; description?: string; }[]
[]
slot
string
undefined