Jumbotron

linkDefault Jumbotron

The jumbotron can be used as a hero section on web pages. It is full customiseable and usually appears with a heading, paragraphy and a call to action.

Hey, I'm Natasha

I'm a UX Designer and a dog lover. Feel free to check out my recent work and blog posts.

View recent work

HTML

<div class="design-preview design-preview-jumbotron">
    <h1>Hey, I'm Natasha</h1>
    <h2>I'm a UX Designer and a dog lover. Feel free to check out my recent work and blog posts.</h2>
    <a href="#" class="jumbotron-hollow button">View recent work</a> 
</div>

SCSS

.design-preview-jumbotron {
    background-image: linear-gradient(133deg, #480048 0%, #C04848 100%);
}

.design-preview-jumbotron h1 {
    color: white;
    font-size: 32px;
    font-weight: 500;
}

.design-preview-jumbotron h2 {
    color: white;
    font-size: 18px;
    font-weight: normal;
    max-width: 75%;
    margin-bottom: 24px;
}

.button.jumbotron-hollow {
    border-radius: 6px;
    background-color: transparent;
    color: white;
    border-color: white;
    font-weight: 500;
    padding: 16px 32px;
    border-colour: white;
}

.button.jumbotron-hollow:hover {
    background-color: white;
    color: $purple;
}