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

props
v-jumbotron
Name
active-class
Default
undefined
Type
string

Components.Jumbotrons.

Name
append
Default
false
Type
boolean

Components.Jumbotrons.

Name
color
Default
undefined
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(255, 0, 0, 0.5)）を設定できます。

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
disabled
Default
false
Type
boolean

Components.Jumbotrons.

Name
exact
Default
false
Type
boolean

Components.Jumbotrons.

Name
exact-active-class
Default
undefined
Type
string

Components.Jumbotrons.

Name
gradient
Default
undefined
Type
string

Components.Jumbotrons.

Name
height
Default
400px
Type
number | string

Components.Jumbotrons.

Name
href
Default
undefined
Type
string | object

Components.Jumbotrons.

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
nuxt
Default
false
Type
boolean

Components.Jumbotrons.

Name
replace
Default
false
Type
boolean

Components.Jumbotrons.

Name
ripple
Default
undefined
Type
boolean | object

Components.Jumbotrons.

Name
src
Default
undefined
Type
string

Components.Jumbotrons.

Name
tag
Default
'div'
Type
string

Components.Jumbotrons.

Name
target
Default
undefined
Type
string

Components.Jumbotrons.

Name
to
Default
undefined
Type
string | object

Components.Jumbotrons.

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
 — Contribution Guide
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