# Quote
Component name: <v-ribbon>
# Examples
# Cards
Header
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Nyhed!
Header
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Log ind
<div class="app">
<div class="row mb-5">
<div class="col-12">
<v-card
:img-src="$withBase('/assets/v-card-2.jpg')"
img-md-position="left"
>
<h1>Header</h1>
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<v-ribbon position="right" color="secondary">Nyhed!</v-ribbon>
</v-card>
</div>
</div>
<div class="row mb-5">
<div class="col-12">
<v-card
:img-src="$withBase('/assets/v-card-4.jpg')"
img-md-position="left"
>
<h1>Header</h1>
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<v-ribbon position="right">Log ind</v-ribbon>
</v-card>
</div>
</div>
</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
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
# Video
Video
<div class="app">
<v-embed aspect="16:9">
<iframe src="https://player.vimeo.com/video/4899787?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<v-ribbon position="right">Video</v-ribbon>
</v-embed>
</div>
1
2
3
4
5
6
2
3
4
5
6
# Gallery
Galleri
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.
<div class="app">
<v-image-group>
<v-image src="http://lorempixel.com/1280/720/?image=1" alt="Lorem ipsum"></v-image>
<v-image src="http://lorempixel.com/1280/720/?image=2" alt="Lorem ipsum"></v-image>
<v-image src="http://lorempixel.com/1280/720/?image=3" alt="Lorem ipsum"></v-image>
<v-image src="http://lorempixel.com/1280/720/?image=4" alt="Lorem ipsum"></v-image>
<v-image src="http://lorempixel.com/1280/720/?image=5" alt="Lorem ipsum"></v-image>
<v-image src="http://lorempixel.com/1280/720/?image=6" alt="Lorem ipsum"></v-image>
<v-image src="http://lorempixel.com/1280/720/?image=7" alt="Lorem ipsum"></v-image>
<v-image src="http://lorempixel.com/1280/720/?image=8" alt="Lorem ipsum"></v-image>
<v-image src="http://lorempixel.com/1280/720/?image=9" alt="Lorem ipsum"></v-image>
<v-image src="http://lorempixel.com/1280/720/?image=10" alt="Lorem ipsum"></v-image>
<template v-slot:description>
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.
</template>
<v-ribbon position="right">Galleri</v-ribbon>
</v-image-group>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# API
Name | Type | Description | Default |
---|---|---|---|
color | String | Sets the background variant color for the v-ribbon wrapper.Valid value: Color variant name or HEX color code | primary |
position | String | Where to position the ribbon Valid value: left or right | right |
Notice
All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the class
attribute.