# Page layout
# Example
This is an example of the default application markup for 3F Design. Have a look at the markup before continuing.
<div class="app" v-app v-cloak>
<v-layout>
<v-header img-src="/assets/v-header-1.jpg">
<template v-slot:navbar>
<v-navbar>
<v-navbar-logo href="#">Kastrup</v-navbar-logo>
<v-navbar-navigation>
<v-navbar-navigation-item href="#">Forside</v-navbar-navigation-item>
<v-navbar-navigation-item href="#">Fordele</v-navbar-navigation-item>
<v-navbar-navigation-item href="#" active>Få hjælp</v-navbar-navigation-item>
<v-navbar-navigation-item href="#">Bliv medlem</v-navbar-navigation-item>
</v-navbar-navigation>
<v-navbar-menu>
<v-navbar-menu-item icon="user">
Niels G
<template v-slot:items>
<v-navbar-menu-item href="#">Log ind</v-navbar-menu-item>
<v-navbar-menu-item href="#">Om mit 3F</v-navbar-menu-item>
<v-navbar-menu-item href="/link.html?SC_LOCKED=25">Min profil</v-navbar-menu-item>
<v-navbar-menu-item href="/link.html?SC_LOCKED=25">Mit arkiv</v-navbar-menu-item>
<v-navbar-menu-item href="/link.html?SC_LOCKED=25">Min jobsøgning</v-navbar-menu-item>
<v-navbar-menu-item href="/link.html?SC_LOCKED=25">Min a-kasse</v-navbar-menu-item>
</template>
</v-navbar-menu-item>
<v-navbar-menu-item icon="search" href="#">Søg</v-navbar-menu-item>
</v-navbar-menu>
</v-navbar>
</template>
<div class="row">
<div class="col-12 col-md-10 col-lg-8">
<v-text tag="h1" class="mb-4" font-size="7" font-md-size="8" bold>Nunc ac mauris sit</v-text>
<v-text font-size="4" font-md-size="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit elementum consectetur. Nunc ac mauris sit amet ex aliquam tincidunt eu in justo.</v-text>
</div>
</div>
</v-header>
<v-content full-width>
<div class="row">
<div class="col">
<v-text tag="h1" font-size="7" bold>
Lorem ipsum dolor
</v-text>
<v-text class="mt-4" font-size="4">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Integer scelerisque condimentum urna, eu suscipit velit. In id nibh enim. Sed non rutrum velit. Suspendisse nec lorem eget dolor bibendum posuere. Sed tincidunt dolor sed nibh vestibulum, vitae molestie nibh lacinia. Phasellus sed ornare libero. Ut ac rhoncus tortor. Curabitur tempor enim ligula, sit amet vehicula ante egestas a. Donec et sollicitudin erat, sed pharetra libero. Aliquam quis ipsum non urna sollicitudin consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis.
</p>
</v-text>
</div>
</div>
<template v-slot:sidebar>
<v-sidebar>
<v-sidebar-item href="#">Populære emner</v-sidebar-item>
<v-sidebar-item href="#">Medlemsskab</v-sidebar-item>
<v-sidebar-item href="#">Løn og ansættelse</v-sidebar-item>
<v-sidebar-item href="#">Sygdom</v-sidebar-item>
<v-sidebar-item href="#" active>
Barsel og orlov
<template v-slot:items>
<v-sidebar-item href="#" active>Forældre og barsel</v-sidebar-item>
<v-sidebar-item href="#">Løn og barsel</v-sidebar-item>
<v-sidebar-item href="#">Sygdom og barsel</v-sidebar-item>
<v-sidebar-item href="#">Lorem ipsum</v-sidebar-item>
</template>
</v-sidebar-item>
<v-sidebar-item href="#">Lærlinge</v-sidebar-item>
<v-sidebar-item href="#">Ferie</v-sidebar-item>
<v-sidebar-item href="#">Opsigelse</v-sidebar-item>
<v-sidebar-item href="#">Tillidserhverv</v-sidebar-item>
</v-sidebar>
</template>
</v-content>
</v-layout>
</div>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
# 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
.
<div class="app" v-app v-cloak>
<v-layout>
<!-- Put content here -->
</v-layout>
</div>
2
3
4
5
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-header
<v-header img-src="/assets/v-header-1.jpg">
<template v-slot:navbar>
<!-- <v-navbar> component goes here -->
</template>
[Header content]
</v-header>
2
3
4
5
6
# API
Name | Type | Description | Default |
---|---|---|---|
img-src | String | Adds an image to the header. Valid value: Image URL | - |
img-align | String | Sets the image alignment. Valid value: Any background-position property | center |
auto-height | Boolean | Will make the header height automatically adjust to the content. | false |
slot: navbar | Slot | Insert v-navbar component here. | - |
# v-navbar
Wrapper component for header navigation.
<v-navbar>
<v-navbar-logo href="#">Kastrup</v-navbar-logo>
<v-navbar-navigation>
<v-navbar-navigation-item href="#">Forside</v-navbar-navigation-item>
<v-navbar-navigation-item href="#">Fordele</v-navbar-navigation-item>
<v-navbar-navigation-item href="#" active>Få hjælp</v-navbar-navigation-item>
<v-navbar-navigation-item href="#">Bliv medlem</v-navbar-navigation-item>
</v-navbar-navigation>
<v-navbar-menu>
<v-navbar-menu-item icon="user">
Niels G
<template v-slot:items>
<v-navbar-menu-item href="#">Log ind</v-navbar-menu-item>
<v-navbar-menu-item href="#">Om mit 3F</v-navbar-menu-item>
<v-navbar-menu-item href="/link.html?SC_LOCKED=25">Min profil</v-navbar-menu-item>
<v-navbar-menu-item href="/link.html?SC_LOCKED=25">Mit arkiv</v-navbar-menu-item>
<v-navbar-menu-item href="/link.html?SC_LOCKED=25">Min jobsøgning</v-navbar-menu-item>
<v-navbar-menu-item href="/link.html?SC_LOCKED=25">Min a-kasse</v-navbar-menu-item>
</template>
</v-navbar-menu-item>
<v-navbar-menu-item icon="search" href="#">Søg</v-navbar-menu-item>
</v-navbar-menu>
</v-navbar>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# API: v-navbar-logo
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-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-content
Wrapper component for page content.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Integer scelerisque condimentum urna, eu suscipit velit. In id nibh enim. Sed non rutrum velit. Suspendisse nec lorem eget dolor bibendum posuere. Sed tincidunt dolor sed nibh vestibulum, vitae molestie nibh lacinia. Phasellus sed ornare libero. Ut ac rhoncus tortor. Curabitur tempor enim ligula, sit amet vehicula ante egestas a. Donec et sollicitudin erat, sed pharetra libero. Aliquam quis ipsum non urna sollicitudin consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis.
<v-content full-width>
<div class="row">
<div class="col">
<v-text tag="h1" font-size="7" bold>
Lorem ipsum dolor
</v-text>
<v-text class="mt-4" font-size="4">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Integer scelerisque condimentum urna, eu suscipit velit. In id nibh enim. Sed non rutrum velit. Suspendisse nec lorem eget dolor bibendum posuere. Sed tincidunt dolor sed nibh vestibulum, vitae molestie nibh lacinia. Phasellus sed ornare libero. Ut ac rhoncus tortor. Curabitur tempor enim ligula, sit amet vehicula ante egestas a. Donec et sollicitudin erat, sed pharetra libero. Aliquam quis ipsum non urna sollicitudin consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis.
</p>
</v-text>
</div>
</div>
<template v-slot:sidebar>
<v-sidebar>
<v-sidebar-item href="#">Populære emner</v-sidebar-item>
<v-sidebar-item href="#">Medlemsskab</v-sidebar-item>
<v-sidebar-item href="#">Løn og ansættelse</v-sidebar-item>
<v-sidebar-item href="#">Sygdom</v-sidebar-item>
<v-sidebar-item href="#" active>
Barsel og orlov
<template v-slot:items>
<v-sidebar-item href="#" active>Forældre og barsel</v-sidebar-item>
<v-sidebar-item href="#">Løn og barsel</v-sidebar-item>
<v-sidebar-item href="#">Sygdom og barsel</v-sidebar-item>
<v-sidebar-item href="#">Lorem ipsum</v-sidebar-item>
</template>
</v-sidebar-item>
<v-sidebar-item href="#">Lærlinge</v-sidebar-item>
<v-sidebar-item href="#">Ferie</v-sidebar-item>
<v-sidebar-item href="#">Opsigelse</v-sidebar-item>
<v-sidebar-item href="#">Tillidserhverv</v-sidebar-item>
</v-sidebar>
</template>
</v-content>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# 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 |
# Article example
<div class="app">
<v-layout>
<v-header auto-height>
<template v-slot:navbar>
<v-navbar>
<v-navbar-logo href="#">Kastrup</v-navbar-logo>
<v-navbar-navigation>
<v-navbar-navigation-item href="#">Forside</v-navbar-navigation-item>
<v-navbar-navigation-item href="#">Fordele</v-navbar-navigation-item>
<v-navbar-navigation-item href="#" active>Få hjælp</v-navbar-navigation-item>
<v-navbar-navigation-item href="#">Bliv medlem</v-navbar-navigation-item>
</v-navbar-navigation>
<v-navbar-menu>
<v-navbar-menu-item icon="user">
Niels G
<template v-slot:items>
<v-navbar-menu-item href="#">Log ind</v-navbar-menu-item>
<v-navbar-menu-item href="#">Om mit 3F</v-navbar-menu-item>
<v-navbar-menu-item href="/link.html?SC_LOCKED=25">Min profil</v-navbar-menu-item>
<v-navbar-menu-item href="/link.html?SC_LOCKED=25">Mit arkiv</v-navbar-menu-item>
<v-navbar-menu-item href="/link.html?SC_LOCKED=25">Min jobsøgning</v-navbar-menu-item>
<v-navbar-menu-item href="/link.html?SC_LOCKED=25">Min a-kasse</v-navbar-menu-item>
</template>
</v-navbar-menu-item>
<v-navbar-menu-item icon="search" href="#">Søg</v-navbar-menu-item>
</v-navbar-menu>
</v-navbar>
</template>
</v-header>
<v-content>
<div class="row">
<div class="col">
<v-text tag="h1" font-size="8" bold>
Midlertidigt udlandsophold i udlandet
</v-text>
<v-text class="mt-4 text-gray-dark" font-size="6">
Har du et fritidsjob, så bliv medlem af 3F. Vi sørger for, du ikke bliver snydt, når du arbejder.
</v-text>
<hr class="mt-5" style="border-color: #E8E8EC;"/>
<v-text class="mt-6" font-size="4">
<p>
Rygter har hele påsken svirret om den amerikanske popsangerinde og hendes psykiske tilstand, efter hun angiveligt lod sig indskrive på et center for psykiske lidelser i starten af april.
</p>
<p>
Medier som Billboard og Variety rapporterede for nyligt, at popstjernen selv havde indskrevet sig selv på et center for psykiske lidelser, men flere fans af sangerinden er af en anden overbevisning. De mener, at sangerinden er blevet indlagt mod sin vilje, og at det blandt andre er hendes far, 66-årige Jamie Spears, der står bag.
</p>
</v-text>
<hr class="mt-5" style="border-color: #E8E8EC;"/>
<v-text class="mt-5" font-size="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.
</v-text>
<v-text class="mt-5" font-size="2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.
</v-text>
<v-text class="mt-5" font-size="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.
</v-text>
<v-text class="mt-5" font-size="4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.
</v-text>
<v-text class="mt-5" font-size="5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.
</v-text>
<v-text class="mt-5" font-size="6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.
</v-text>
<v-text class="mt-5" font-size="7" bold>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit.
</v-text>
<v-text class="mt-5" font-size="8" bold>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</v-text>
<v-text class="mt-5" font-size="9" bold>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</v-text>
<hr class="mt-5" style="border-color: #E8E8EC;"/>
<v-text class="mt-6" font-size="6" bold>
Lorem ipsum dolor sit amet
</v-text>
<v-text class="mt-3" font-size="4">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate. magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat.
</p>
</v-text>
<v-card class="mt-5">
<v-text>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate. magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat.
</p>
</v-text>
</v-card>
<v-text class="mt-6" font-size="6" bold>
<span class="text-primary">Video:</span> Lorem ipsum dolor sit amet
</v-text>
<v-text class="mt-3" font-size="4">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate. magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat.
</p>
</v-text>
</div>
</div>
<template v-slot:sidebar>
<v-sidebar>
<v-sidebar-item href="#">Populære emner</v-sidebar-item>
<v-sidebar-item href="#">Medlemsskab</v-sidebar-item>
<v-sidebar-item href="#">Løn og ansættelse</v-sidebar-item>
<v-sidebar-item href="#">Sygdom</v-sidebar-item>
<v-sidebar-item href="#" active>
Barsel og orlov
<template v-slot:items>
<v-sidebar-item href="#" active>Forældre og barsel</v-sidebar-item>
<v-sidebar-item href="#">Løn og barsel</v-sidebar-item>
<v-sidebar-item href="#">Sygdom og barsel</v-sidebar-item>
<v-sidebar-item href="#">Lorem ipsum</v-sidebar-item>
</template>
</v-sidebar-item>
<v-sidebar-item href="#">Lærlinge</v-sidebar-item>
<v-sidebar-item href="#">Ferie</v-sidebar-item>
<v-sidebar-item href="#">Opsigelse</v-sidebar-item>
<v-sidebar-item href="#">Tillidserhverv</v-sidebar-item>
</v-sidebar>
</template>
</v-content>
</v-layout>
</div>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133