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>
1
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>
1
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-navbar-menu]
[Header content]
<v-header img-src="/assets/v-header-1.jpg">
  <template v-slot:navbar>
    <!-- <v-navbar> component goes here -->
  </template>
  [Header content]
</v-header>
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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>
1
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>
1
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