3F Design v1.64.0

Page layout

Example

This is an example of the default application markup for 3F Design. Have a look at the markup before continuing.

Required application markup

The v-app attribute and the css class app is required to bootstrap your application. v-layout needs to be a direct descendant of v-app.

TIP

The v-cloak attribute hides your application during initial rendering.

Components

v-layout

This root component acts as an application wrapper, which currently exists mostly for future proofing. This component will allow us to pass options globally should we decide to introduce it. v-layout needs to be a direct descendant of v-app.

v-navbar

Name Type Description Default
href String Specifies the URL of the page the link goes to. -
target String Specifies where to open the linked document. -
title String HTML title Attribute. -

API: v-language-selector

Name Type Description Default
locales Object An object that associate locales with urls {}

API: v-navbar-navigation-item

Name Type Description Default
href String Specifies the URL of the page the link goes to. -
target String Specifies where to open the linked document. -
title String HTML title Attribute. -
active Boolean Specifies if item is active. false

API: v-navbar-menu-item

Name Type Description Default
icon String Specifies which icon to show. Should only be used on top-level. -
href String Specifies the URL of the page the link goes to. -
target String Specifies where to open the linked document. -
title String HTML title Attribute. -
active Boolean Specifies if item is active. false
slot: items Slot Insert child v-navbar-menu-item components here. Will be shown in dropdown. -

Notice

If a url provided as href contains the query parameter SC_LOCKED the item will be styled as locked.

v-hero

API

Name Type Description Default
img-src String Adds an image to the hero.

Valid value: Image URL		 -
img-align String Sets the image alignment.

Valid value: Any background-position property		 center
auto-height Boolean Will make the hero height automatically adjust to the content. false
small Boolean Small size false

v-content

API

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

API

Name Type Description Default
img-src String Adds an image to the element.

Valid value: Image URL		 -
tab-titles Array Use to specify tab titles -
slot:tab-1-4 Slot Use these slots to specify tab content -

API

Name Type Description Default
slot:col-1-5 Slot Use these slots to specify column content -

API

Name Type Description Default
slot:social Slot Place social media icons here -
slot:address Slot Insert address content here -
slot:language-selector Slot Insert language-selector-component component here -

Article example

← Grid →