Format Demo

— 3 minute read

Let's see how footnotes work

So in markdown you can make a footnote. [^Even better, you can make a footnote with Bigfoot.js look really cool!]

What also works, are: [1] . Pretty cool!

Also [^1] Footnotes can be listed like this.

How about a <blockquote>?

Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.

A list of stuff:

  • Sed posuere consectetur est at lobortis
  • Aenean lacinia bibendum nulla sed consectetur
  • Sed posuere consectetur est at lobortis

How about an ordered list of stuff:

  1. Sed posuere consectetur est at lobortis
  2. Aenean lacinia bibendum nulla sed consectetur
  3. Sed posuere consectetur est at lobortis

The .full-bleed utility

It’s small, but hella mighty:

.full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

Here it is in a context where it makes a fancy <aside> and a <figure> element bleed out of their parent container.

The .full-bleed utility gives those elements prominence and importantly keeps their semantic place in the page. Just how I like it.

🔥 Pro tip: When working with a utility like .full-bleed, it’s a good idea to add an inner container that has a max-width and auto horizontal margin. For this, I normal create a shared .wrapper component like this:

.wrapper {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}

Having a container like .wrapper helps to create consistent, centred content.

Video demo

If you want to make an image bleed-out, add a title attribute to it and the front-end will automatically wrap it in a <figure> tag for you.

The top of a grey concrete building with a blue sky in the background
Brutalism at its finest. Photo by Artificial Photography on Unsplash.

You can also add videos to posts from YouTube or Vimeo (or wherever, really) and the front-end will also make those bleed-out for you too.

Finally, how about a <blockquote>?

Quotes will take a slightly different style to normal body text and look fancy.

Person holds up a photograph of a riverside and buildings with the same river as a backdrop
Remember, if you want a figure and caption, add a 'title' attribute to image in the body field — Photo by Kharytonova Antonina on Unsplash.

Hopefully, this has demonstrated how simple it is to make a nice looking blog with Hylia.

  1. These types of footnoes ↩