.has-text-pinterest
.has-text-pinterest-light
.has-text-pinterest-dark
Styles and examples for .is-pinterest
Button Variants
Available modifiers: default, .is-outlined, .is-light, .is-dark, .is-inverted
<a class="button is-pinterest">
<span class="icon">
<i class="fa-brands fa-pinterest"></i>
</span>
<span>Pinterest</span>
</a>
<a class="button is-pinterest is-outlined">
<span class="icon">
<i class="fa-brands fa-pinterest"></i>
</span>
<span>Outlined</span>
</a>
<a class="button is-pinterest is-light">
<span class="icon">
<i class="fa-brands fa-pinterest"></i>
</span>
<span>Light</span>
</a>
<a class="button is-pinterest is-dark">
<span class="icon">
<i class="fa-brands fa-pinterest"></i>
</span>
<span>Dark</span>
</a>
<a class="button is-pinterest is-inverted">
<span class="icon">
<i class="fa-brands fa-pinterest"></i>
</span>
<span>Inverted</span>
</a>Icon Buttons
Buttons without text, icon-only
<a class="button is-pinterest">
<span class="icon">
<i class="fa-brands fa-pinterest fa-lg"></i>
</span>
</a>Button Sizes
Available sizes: .is-small, normal, .is-medium, .is-large
<a class="button is-pinterest is-small">
<span class="icon">
<i class="fa-brands fa-pinterest"></i>
</span>
<span>Small</span>
</a>
<a class="button is-pinterest">
<span class="icon">
<i class="fa-brands fa-pinterest"></i>
</span>
<span>Normal</span>
</a>
<a class="button is-pinterest is-medium">
<span class="icon">
<i class="fa-brands fa-pinterest"></i>
</span>
<span>Medium</span>
</a>
<a class="button is-pinterest is-large">
<span class="icon">
<i class="fa-brands fa-pinterest"></i>
</span>
<span>Large</span>
</a>Button States
Available states: .is-hovered, .is-focused, .is-active, .is-loading, disabled
<a class="button is-pinterest is-hovered">
<span class="icon">
<i class="fa-brands fa-pinterest"></i>
</span>
<span>Hovered</span>
</a>
<a class="button is-pinterest is-focused">
<span class="icon">
<i class="fa-brands fa-pinterest"></i>
</span>
<span>Focused</span>
</a>
<a class="button is-pinterest is-active">
<span class="icon">
<i class="fa-brands fa-pinterest"></i>
</span>
<span>Active</span>
</a>
<a class="button is-pinterest is-loading">
<span class="icon">
<i class="fa-brands fa-pinterest"></i>
</span>
<span>Loading</span>
</a>
<a class="button is-pinterest" disabled>
<span class="icon">
<i class="fa-brands fa-pinterest"></i>
</span>
<span>Disabled</span>
</a>Text Colors
Helper classes for text color
.has-text-pinterest
.has-text-pinterest-light
.has-text-pinterest-dark
<p class="has-text-pinterest">Text with Pinterest color</p>
<p class="has-text-pinterest-light">Text with Pinterest light color</p>
<p class="has-text-pinterest-dark">Text with Pinterest dark color</p>Background Colors
Helper classes for background color
<div class="has-background-pinterest has-text-white">
.has-background-pinterest
</div>
<div class="has-background-pinterest-light">
.has-background-pinterest-light
</div>
<div class="has-background-pinterest-dark has-text-white">
.has-background-pinterest-dark
</div>