Ribbon

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

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
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

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.