Bulma Hero Colors
Last Updated :
10 Feb, 2022
Bulma Hero is an essential component with the help of which we can create a full-width banner on our webpage. Optionally, this banner can cover the entire height of the page as well.
Bulma Hero Colors are different types of colors that are available for the Hero modifier. These various colors are known as color modifiers. These color modifiers are written along with the container name. They are nothing but gradients i.e. a mixture of multiple colors in a particular amount. Let us get acquainted with every color modifier that is available.
Bulma Hero Colors Class:
- is-primary: The modifier is used in order to apply primary color on our hero component. Its HSL value is : HSL(171, 100%, 41%). This color can be recognized as a middle-washed spring green color. It is similar to the Turquoise color.
- is-danger: The modifier is used in order to apply danger color on our hero component. Its HSL value is : HSL(348, 100%, 61%). This color can be recognized as a middle-washed rose color. It is similar to the Radical Red color.
- is-link: The modifier is used in order to apply link color on our hero component. Its HSL value is : HSL(217, 71%, 53%). This color can be recognized as a Cornflower Blue color. It is similar to the Blue color.
- is-info: The modifier is-info is used in order to apply info color on our hero component. Its HSL value is : HSL(204, 86%, 53%). This color can be recognized as a middle-washed azure color. It is similar to the Cyan color.
- is-success: The modifier is used in order to apply success color on our hero component. Its HSL value is : HSL(141, 53%, 53%). This color can be recognized as a medium sea green color. It is similar to the Green color.
- is-warning: The modifier is used in order to apply warning color on our hero component. Its HSL value is : HSL(48, 100%, 67%). This color can be recognized as a light muted yellow color. It is similar to the Yellow color.
Syntax: The syntax for all the colors will be the same for all the below classes, and the only difference will be the color name.
<section class="hero is-primary">
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width = device-width, initial-scale = 1">
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<section class="hero is-primary">
<div class="hero-body">
<p class="title">
This is Primary Color
</p>
<p class="subtitle">
Primary Hero
</p>
</div>
</section>
<br>
<section class="hero is-danger">
<div class="hero-body">
<p class="title">
This is Danger Color
</p>
<p class="subtitle">
Danger Hero
</p>
</div>
</section>
<br>
<section class="hero is-link">
<div class="hero-body">
<p class="title">
This is Link Color
</p>
<p class="subtitle">
Link Hero
</p>
</div>
</section>
</body>
</html>
|
Output:
Bulma Hero Colors
Example 2:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width = device-width, initial-scale = 1">
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<section class="hero is-info">
<div class="hero-body">
<p class="title">
This is Info Color
</p>
<p class="subtitle">
Info Hero
</p>
</div>
</section>
<br>
<section class="hero is-success">
<div class="hero-body">
<p class="title">
This is Success Color
</p>
<p class="subtitle">
Success Hero
</p>
</div>
</section>
<br>
<section class="hero is-warning">
<div class="hero-body">
<p class="title">
This is Warning Color
</p>
<p class="subtitle">
Warning Hero
</p>
</div>
</section>
</body>
</html>
|
Output:
Bulma Hero Colors
Reference: https://bulma.io/documentation/layout/hero/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...