Design Elements (H1, Title)

H2 Heading

H3 Heading

H4 Heading

Small buttons

These are buttons that display in 2 columns. It's best to have an even amount of buttons for this to look right. If you have an odd amount of buttons, consider using Big Buttons instead (or a combination).

Want to make your own pair of buttons? Just copy this code:

<ul class="smallbutton">
<li><a href="#">Small button example - replace this text</a></li>
<li><a href="#">Small button example 2 - replace this text</a></li>


Stretchy Buttons

Want to make your own? Just use this code:

<ul class="bigbutton">
<li><a href="#">Stretchy Button that can extend to the width of the page -- replace this text</a></li>

Making a call-out box is easy.

All you need to do is copy this code and replace the copy with your own. Or you can learn to do it yourself by simply putting this code below text you want to be in a call out box: <div class="calloutGray"> and then close the div after your copy with this bit of code: </div> Once you've done that it won't look like much in the text editor, but it will show up once you publish it to the site.

There's a blue version if you need it.

Just call blue instead of gray: <div class="calloutBlue">

Test of link coloring.

  1. Test of link coloring within an ordered list

Example of using Anchor Tags

Click to go back to the top of the page.

To create a new one, click the button that looks like an anchor in the text editor and place the icon where you want it to scroll to.

After you've created the tag, you can link to it by making a link that starts with # and uses the same name that you just created.

This link will take you to the small buttons section.

Drupal has a weird quirk when it comes to anchor tags. The link code works fine. It's just looks like this:

<a href="#smallbuttons">

But when you create an anchor (the place on the page that you're linking to) with Drupal's Anchor Tool on the toolbar, it gets the code wrong. It spits out:

<a id="smallbuttons"></a>

But this isn't optimum because "id" doesn't always work and "name" is still very popular despite being deprecated in HTML5. Because of that, it's best to go into the code and add "name", like this:

<a id="smallbuttons" name="smallbuttons"></a>

Now your anchor tags will work!

News Cards


Use News Cards to display content in a stylish 2-column format

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales justo eget tellus tincidunt, nec elementum eros bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent bibendum lectus ac placerat bibendum.


News Cards use simple code to make a big impact

Maecenas arcu risus, sodales et laoreet in, finibus vitae arcu. Pellentesque vitae cursus nunc. Fusce condimentum, urna sit amet accumsan varius, tellus ipsum bibendum metus, vitae maximus nulla diam vitae urna. Nullam odio ipsum, mattis et mollis vel, dictum eu nisi.