Essay components

This page provides all the kinds of code snippets you might need. The gray boxes should show you exactly what code you need to use; copy and paste it into your own site pages and adjust the attributes as you need to.

• In all of the below examples, make sure you take extreme care with your quotation marks and other coding symbols!

• DO NOT use double quotation marks " in your titles or captions. Single quotation marks ' are fine.

• Remember to use the Markdown Cheat Sheet for Markdown syntax issues. And you can always double check and experiment with Dillinger.

Essay Metadata

All essays MUST BEGIN with the following metadata at the top of the page, with the values customized to your own page. Be sure you have the 3 hyphens --- before and after your metadata on their own lines. The top of your essay page should look like:

---
title: Mesa Vista Hall
author: Fred Gibbs
layout: unm-base
date: 2025-04-17
---

Obviously, change the title, author, and date for your own essay, but keep the layout set to unm-base.

Headings

Second-level heading

blah blah blah blah …

Third-level heading

blah blah blah blah …

Fourth-level heading

blah blah blah blah …

## Second-level heading

### Third-level heading

#### Fourth-level heading

Pull Quotes

As part of our effort to highlight our most important ideas—even in the context of relatively short essays—we can use pull quotes. As it sounds, the idea is to “pull” a quote outside the main flow of the text to highlight it. You can specify if you want it on the left or right side.

Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.

To place a pull quote as above, we use:

{% include aside.html
  class="left"
  text="Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque."
  %}

Block quotes

If you are quoting from a historical source, you might want to say more than can fit in a normal pull quote format. For those cases, you can use a markdown blockquote to highlight a particularly juicy quotation. Just start your quote with a greater-than sign as shown below:

Here is my regular text.

Here is my very interesting quote. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque.

And back to the regular text.

> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque.

Images

There is one basic way we will embed images in our essay files. Note that it is totally different from how you learned to do them in Markdown itself. This is because if we want to maintain consistency between images, like how the captions appear, we have to make sure we display all images exactly the same way.

Standard Usage

You can set the parameter to be whatever percent of the page width you want.

Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum.

To embed the image above, we use:

{% include figure.html
  class="img-right"
  width="33%"
  caption="Centennial Hotel"
  src="images/centennial-hotel.jpg"
%}

Half-width

Here’s a half-page image just for fun. Use the width parameter to set whatever percent you want. Usually, keeping images aligned with standard widths like 25%, 33%, 50%, 66% is best.

Sometimes you need something a little different, though, so you can enter whatever number you want for the width parameter.

{% include figure.html
class="img-left"
width="50%"
caption="Obviously we need a 50% image somewhere with text wrapping around it."
src="images/centennial-hotel.jpg"
%}

Side by side

To achieve two images side by side use, make sure the width for each is 48%. (It’s less than 50% to make room for margins.)

{% include figure.html
class="img-left"
width="48%"
caption="Here's an image on the left."
src="images/centennial-hotel.jpg"
%}

{% include figure.html
class="img-left"
width="48%"
caption="Here's an image on the right."
src="images/centennial-hotel.jpg"
%}

Full-width

Of course you can have the image take 100% of the page container, but make sure you’re image is large enough to look nice. Unlike the below example.

{% include figure.html
  class="img-center"
  width="100%"
  caption="Make sure your image is large enough to be 100% width or it will look grainy. See above."
  src="images/centennial-hotel.jpg" %}

Jumbotron Images

You’ll notice that even a “full-width” image is still bound by our page margins. But sometimes you just need to turn things up to 11.

In that case, go jumbo! You can make an image be the whole width of the browser window, and control the height of the image for whatever effect you need. Set the height parameter to be the % of the browser height. (So, 100 will take up the browser winder, however big or small that is.)