
Buttons
Button text should be written in sentence case. Try to restrict button text to three words or less.
Sizes
-
The default button size is small and needs no additional size class.
Read more<a href="" class="dh-btn">Read more</a>
-
If you want a smaller button, throw in a tiny class.
Read more<a href="" class="dh-btn dh-btn--tiny">Read more</a>
-
If you want a bigger button, we have a medium class.
Read more<a href="" class="dh-btn dh-btn--medium">Read more</a>
-
We also have a large class.
Read more<a href="" class="dh-btn dh-btn--large">Read more</a>
Icons
-
Want an arrow? Add a class.
Read more<a href="" class="dh-btn dh-btn--arrow">Read more</a>
Color
-
If you'd like the arrow to be a different color, we have an alternate that works with the pallette.
Read more<a href="" class="dh-btn dh-btn--color-alt--arrow">Read more</a>
-
Here's an example with a different background color.
Read more<a href="" class="dh-btn dh-btn--color-alt">Read more</a>
-
Here's an example with a different background color, and an arrow.
Read more<a href="" class="dh-btn dh-btn--color-alt dh-btn--arrow">Read more</a>
-
Sometimes we need a white button on a dark background.
-
Sometimes we need a ghost button on a dark background.
Read more<a href="" class="dh-btn dh-btn--medium dh-btn--ghost">Read more</a>
Width
-
By default, buttons conform to the width of their text, but sometimes we might want them to fill the width of their container.
Read more<a href="" class="dh-btn dh-btn--medium dh-btn--wide">Read more</a>
Text as button
-
When we want an arrow, but no heavy button… Read more
<a href="" class="btn-txt">Read more</a>