mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
2.3 KiB
2.3 KiB
layout | title | introduction | color | name | icon |
---|---|---|---|---|---|
post | Roses are red – Links are blue | What's better than one tag? Multiple tags! | link | Roses are red<br>Links are blue | tag |
By default, a browser will display links in blue. Bulma has up until now used the $primary
color as the $link
color:
// Old styles
$link: $primary !default
But the primary color is mostly used as the brand color, and is not necessarily well suited for links. For readability purposes, and to add more flexibility to your design choices:
- the
$link
color defaults to$blue
$info
is using the new$cyan
color$link
has been added to the$colors
map as well
// New styles
$link: $blue !default
$info: $cyan !default
Deprecation warning
Because the modifier is-link
for buttons already existed, it has been renamed to is-text
.
As such, the following components are now blue:
All Bulma elements and components that support color modifiers now support the .is-link
color:
<div class="notification is-link">
Link notification.
</div>
<div class="notification is-info">
Info notification.
</div>
<button class="button is-link">
Link button
</button>
<button class="button is-info">
Info button
</button>
Link notification.
Info notification.
Link button
Info button
If you want to use the $primary
color for your links, just customize your Bulma setup by including these rules:
$link: $primary !default
$link-invert: $primary-invert !default
$link-focus-border: $primary !default