Base CSS

pick and choose, it's up to you!


These elements are all styled using Montserrat and Muli via Google fonts. You are able to overwrite these styles.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus dignissim magna porttitor convallis. Aliquam faucibus lorem eget malesuada sollicitudin. Nam et lorem lobortis, congue lacus non, elementum lacus. Duis convallis lorem metus, in aliquet mi ultricies vel. Nulla accumsan pellentesque dui vitae malesuada. Praesent a ante et urna tempus dapibus in vitae enim. Aenean porta ipsum eget libero suscipit, tempus tempor neque hendrerit.

This is a default anchor style. You are able to change it with an overwrite as well.

Click me I'm Irish

This a link in a p tag, Hello there Gumdrop!


"Snow" .default
"Honey" .primary
"Tomato" .secondary
"Cadet Blue" .info



default primary secondary info success


button/anchor states

You can set buttons or anchors to be disabled, they will not allow the user to click on them and will turn slightly opaque.

disabled button

Buttons and Action Pills can be set to fill the entire view of the container it resides in using "btn-block". Resize your window on desktop; phones automatically show as block.

block button

Like "btn-block", Full block buttons allow you to have buttons that always fill their residing container.

full-block button

Action Pill

scroll down continue upload files error occured forest maps

Action Buttons

These are meant for special actions that reside on cards.


GumDrop supports responsive images by using the "img-responsive" class within your "img" tags. Resize the window to see it in action.

responsive image demo


These are all the input components availale for use in Gumdrop.

Select a Choice
Check All That Apply