3F Design v1.111.0

# Page layout

Below is an example of the 3F Design page layout. Have a look at the markup under the Code tab.

# Required markup

To enable the page layout use the following required application markup:

<div class="app" v-app v-cloak>
  <v-layout>
    <template #navigation>
      <!-- Navigation components here -->
    </template>
    <template v-slot="slotProps">
      <!-- Hero component here (optional) -->
      <v-content>
        <v-skip-to-content :skip="slotProps.skipToContent"></v-skip-to-content>
        <!-- Page content here -->
      </v-content>
      <!-- Footer components here -->
    </template>
  </v-layout>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Page content

All page specific content should be placed in the v-content component, which also has a #sidebar slot available to hold secondary navigation.

# API: v-content

Name Type Description Default
full-width Boolean Specifies whether or not content should take up full width. false
slot: sidebar Slot Insert v-sidebar components for secondary navigation here No sidebar

# v-skip-to-content

Special WCAG 2.0 accessibility (opens new window) component, which should be placed where the main content begins. The first link of the page (visible when tabbing) goes to the location of this component when activated.

Navigation and other common layout components are documented separately:

← Navigation →