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>

</ul>

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>
</ul>

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.

Unfortunately, the gold links don't work with bullets and lists.

  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

heart hands

Emergency Fund for Employees

Employees who need financial assistance due to a temporary hardship can apply for the new Employee Emergency Assistance Fund, starting January 2021. Learn more about the purpose of the fund and application process. If you'd like to contribute to this fund and help U of M employees facing extraordinary hardships, make a gift here.

Coronavirus

COVID-19 HR Updates

More information on COVID-19 related programs, including the Retirement Incentive Option, Leaves, Virtual Care Resources, and the Furlough and Pay Reduction Program.

Tips for making News Cards

1. There must be 2 news cards per "cardholder"

2. Assets needed: An image, a headline, a link (for headline & image), body copy (with any additional links).

3. Image dimensions: 400 wide x 267 tall.

4. Upload the image first and grab the URL instead of using the Media Browser. To do this in Drupal, log in, go to the Content section, click on the Files tab on the right side and click "Add file" to upload. After uploading, when you're back in the Files section click on the image you just uploaded. It will bring you a Drupal page with just the image. Right-click on it and choose "Copy Image Address." This is the URL you should use for your news card.

Next let's look at the code in a news card. Some helpful notes are in bold below. You can copy this code and it should work fine even with the notes in place.

<div class="cardholder"> <!--This begins the news card group (of 2) -->
<div class="newscards">
<!--This begins the first news card. Next, add the image's link -- not it's URL, but whatever page it links to. -->
<a href="https://z.umn.edu/employeehardship">

<img src="https://humanresources.umn.edu/sites/humanresources.umn.edu/files/styles..." alt="heart hands">
<!-- This is the image. Make sure you use the process in step 4 above. And don't forget the alt text! -->
</a>
<!-- This is closes the image link -->
<h3> <a href="https://z.umn.edu/employeehardship">Emergency Fund for Employees</a></h3>
<!-- This is both the headline and the link. Typically, this should be the same as the image link. -->
<p>Employees who need financial assistance due to a temporary hardship can apply for the new Employee Emergency Assistance Fund, starting January 2021. <a href="https://z.umn.edu/employeehardship">Learn more about the purpose of the fund and application process.</a> If you'd like to contribute to this fund and help U of M employees facing extraordinary hardships, <a href="https://makingagift.umn.edu/give/fund.html?id=23570">make a gift</a> here.</p>
<!-- The above section in between the <p> and </p> is the body copy. You can of course have several different links in here. -->
</div>
<!-- This closes the FIRST news card only. -->

<!-- This begins the 2nd news card. It's basically the same as the first. -->
<div class="newscards">
<a href="https://humanresources.umn.edu/home/hr-novel-coronavirus">
<img src="https://humanresources.umn.edu/sites/humanresources.umn.edu/files/styles..." alt="Coronavirus">
</a>
<h3><a href="https://humanresources.umn.edu/home/hr-and-covid">COVID-19 HR Updates</a></h3>
<p>More information on COVID-19 related programs, including the Retirement Incentive Option, <a href="https://humanresources.umn.edu/benefits/vacations-and-leaves">Leaves</a>, <a href="https://humanresources.umn.edu/covid-19/virtual-care-during-covid-19">Virtual Care Resources</a>, and <a href="https://humanresources.umn.edu/covid-19/furlough">the Furlough and Pay Reduction Program</a>.</p>
</div>
</div>
<!-- This closes BOTH news cards. It corresponds to the "cardholder" div above -->

That's it! Just remember to add your alt text. And don't forget you need two news cards per cardholder. If you want to make 4 news cards, just duplicate the entire cardholder chunk. You can make as many news cards as you want as long as they're in groups of 2.

Lastly, if you don't have a link for some reason, just use the # sign in place of the URL, like <a href="#"> instead.