3F Design v1.100.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 and has a dedicated navigation slot. v-layout needs to be a direct descendant of v-app.

API: v-layout

Name Type Description Default
slot: navigation Slot Insert v-navbar component here. -

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 {}
Name Type Description Default
url String URL called asynchronously to fetch search results based on the user's search query. The supplied url must contain a {query} placeholder. -
label String Names the object property used to display a search result. -
option-id String Names the object property used to identify individual search results. The property must thus be unique across all results. -
popular-topics Array Data used to display popular search topics []
placeholder String Placeholder text shown when the search input field is empty. -
@select Event Event triggered when a selection has been made. The selected value can be found in the $event object. -
@search-result Event Event triggered when a search with results has completed. The query value can be found in the $event object. -
@search-no-result Event Same as @search-result but without results. -

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-md-src String A breakpoint and pixel-density specific version of img-src -
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		 -
tabs Array Use to specify tab ids and 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 →