Jumbotron

The jumbotron is a flexible call to action component. Supports background images, gradient overlays and much more.

Jumbotrons have been deprecated since v1.2, it is recommended that you use v-img, v-responsive, or a plain div instead.

API

v-jumbotron
Name
active-class
Default
undefined
Type
string

Class bound when component is active. warning Depending upon the component, this could cause side effects. If you need to add a custom class on top of a default, just do active-class="default-class your-class"

Name
append
Default
false
Type
boolean

Vue Router router-link prop

Name
color
Default
undefined
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
disabled
Default
false
Type
boolean

Route item is disabled

Name
exact
Default
false
Type
boolean

Exactly match the link. Without this, '/' will match every route

Name
exact-active-class
Default
undefined
Type
string

Vue Router router-link prop

Name
gradient
Default
undefined
Type
string

Apply a gradient background. If used with the src prop, will overlay it

Name
height
Default
400px
Type
number | string

Sets the component height

Name
href
Default
undefined
Type
string | object

Will designate the component tag to <a>

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
nuxt
Default
false
Type
boolean

Specifies the link is a nuxt-link

Name
replace
Default
false
Type
boolean

Vue Router router-link prop

Name
ripple
Default
undefined
Type
boolean | object

Applies the v-ripple directive

Name
src
Default
undefined
Type
string

The img src

Name
tag
Default
'div'
Type
string

Specify a custom tag to use on the component

Name
target
Default
undefined
Type
string

Specify the target attribute.

Name
to
Default
undefined
Type
string | object

Will designate the component tag to <router-link>

Examples

Custom color

Apply a custom background-color

Gradient

More information on writing gradients can be found here

Gradient with image

More information on writing gradients can be found here

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore