disclaimer: text gradients aren't able to gradually transition to a different gradient as you hover over it, it will instantly snap to a different gradient. hover over the buttons below and compare it with the text for reference

CSS Class: gradient-blue-text

CSS Class: gradient-green-text

CSS Class: gradient-pink-yellow-text

CSS Class: gradient-purple-text

CSS Class: gradient-yellow-pink-text

CSS Class: green-text

CSS Class: yellow-text

CSS Class: orange-text

CSS Class: red-text

CSS Class: blue-text

CSS Class: black-text

here are some h1 headers 

just make sure to enclose it in a row 

IN GEM FIRST, WITH CLASS OF 'box-header'

You must create a new text block per line of text, and give it a CSS class of 'subtext'

to get the uneven effect of the black background like this

the text color classes above can be used here too

also these CSS changes need to be added to each text block and header to override GEM's default CSS: 

display: table !important;

width: auto !important;

use the CSS class 'btn-arrow' to add an arrow to the end of the button. 
use any of the below CSS class names to designate a button background.

add CSS class of 'brighten' to brighten a picture

as you hover over it

add CSS class 'vertical_align' to the parent row

to vertically align elements within the row like these

vertical_unalign_mobile class to maintain mobile stack