These common blocks and embeds are largely styled versions of text variations you see on all websites. They’re available on default templates, top level pages, blog posts, and student stories.

Scroll through this page to see examples of the following:

Paragraph
Drop Cap
Bold, Italics, Strikethrough
Inline Code
Inline Links
Inline Images
Headings
Lists
Code Blocks
Buttons
File
Basic Image & Video Embeds
Cover Image & Video Embeds

If you’d like to include a drop cap, select the paragraph you want it to appear in and check out the block settings to the right. You’ll see a toggle to turn on the drop cap under Text Settings. Donec lobortis laoreet nibh, vel blandit diam faucibus at. Cras non lobortis dolor, vitae facilisis purus. Nulla facilisi. Sed suscipit libero vel nisi consectetur, in aliquet purus luctus. Aenean quis vestibulumipsum. Curabitur molestie gravida rutrum. Pellentesque molestie augue at lectus dictum porttitor.

This is a paragraph with all of the things. Sed molestie quam a outbound link urna egestas mattis. Aliquam blandit erat porttitor sagittis. Morbi velit enim, bibendum non vestibulum at, bold text eleifend eu nunc. In hac habitasse platea dictumst. Cras feugiat quam diam, ut aliquet purus ornare a. Maecenas efficitur rhoncus enim, an inline image that is treated like an emoji vel euis mod ligula an vehicula eget italic text. Integer efficitur finibus erat, id volutpat felis lacinia porttitor. This is inline code. Nulla internal link tellus, vel mattis sem pellentesque interdum. Mauris laoreet vehicula semper. ~~Strikethrough text~~. Sed aliquet ut dolor eget aliquet. Maecenas malesuada nulla nisl, non fermentum nunc dapibus in. Sed eget mauris in tortor laoreet ullamcorper.

Headings

An h1 header with a link

Donec lobortis laoreet nibh, vel blandit diam faucibus at. Cras non lobortis dolor, vitae facilisis purus. Nulla facilisi. Sed suscipit libero vel nisi consectetur, in aliquet purus luctus. Aenean quis vestibulum ipsum. Curabitur molestie gravida rutrum. Pellentesque molestie augue at lectus dictum porttitor.

An h2 header with a link

An h3 header with a link

An h4 header with a link

An h5 header with a link

An h6 header with a link

An h2 header

Followed directly by any other header h1-h6

An h3 header

Followed directly by any other header h1-h6

An h4 header

Followed directly by any other header h1-h6

Nullam eleifend dolor quam, nec pellentesque urna faucibus vel. Suspendisse congue, massa a mattis eleifend, leo massa malesuada mi, ac rutrum orci nisl non neque. Nunc vestibulum, tortor congue efficitur venenatis, lacus justo maximus justo, ac laoreet metus nulla eu neque. Donec ut pharetra justo. Mauris at suscipit tellus. Vivamus vitae pharetra felis. In volutpat sed ipsum vel auctor. Aenean nec vulputate ipsum, eget blandit magna.

Lists

Unordered lists

Morbi eleifend ex justo, ut ultrices felis facilisis eget. Aenean lorem massa, malesuada quis bibendum sed, sollicitudin at neque.
- Fusce risus elit, pharetra nec purus eu, posuere pharetra lacus. Donec dapibus vehicula dolor et malesuada.
- Fusce risus elit, pharetra nec purus eu, posuere pharetra lacus. Donec dapibus vehicula dolor et malesuada.
- Fusce risus elit, pharetra nec purus eu, posuere pharetra lacus. Donec dapibus vehicula dolor et malesuada.
Nunc posuere, neque sit amet vulputate rhoncus, mauris massa convallis neque, eget commodo magna mi in orci.
Nunc vestibulum erat viverra scelerisque dignissim. Phasellus est odio, volutpat quis interdum at, vulputate lobortis libero.

Ordered lists

Morbi eleifend ex justo, ut ultrices felis facilisis eget. Aenean lorem massa, malesuada quis bibendum sed, sollicitudin at neque.
1. Fusce risus elit, pharetra nec purus eu, posuere pharetra lacus. Donec dapibus vehicula dolor et malesuada.
  1. Fusce risus elit, pharetra nec purus eu, posuere pharetra lacus. Donec dapibus vehicula dolor et malesuada.
  2. Fusce risus elit, pharetra nec purus eu, posuere pharetra lacus. Donec dapibus vehicula dolor et malesuada.
2. Fusce risus elit, pharetra nec purus eu, posuere pharetra lacus. Donec dapibus vehicula dolor et malesuada.
Nunc posuere, neque sit amet vulputate rhoncus, mauris massa convallis neque, eget commodo magna mi in orci. Nunc vestibulum erat viverra scelerisque dignissim.
Phasellus est odio, volutpat quis interdum at, vulputate lobortis libero.

Code

%article-component-styles {
  .wp-block-code {
    @include block-spacing--md;
    background: $c-code-bg;
    color: $c-code;
    padding: $spacing-sm;
    border-radius: 3px;
    @include mq($bp--tablet-xl) {
      padding: $spacing-lg;
    }
  }
}

Buttons

This is a button

This is another button

This button looks different

Nunc posuere, neque sit amet vulputate rhoncus, mauris massa convallis neque, eget commodo magna mi in orci. Nunc vestibulum erat viverra scelerisque dignissim. Phasellus est odio, volutpat quis interdum at, vulputate lobortis libero.

File

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tellus mauris, volutpat a pretium nec, egestas vitae nibh. Cras ante felis, placerat sed facilisis ac, ultricies in ante. Nulla egestas enim et semper semper. Pellentesque mollis lobortis congue. In ac eleifend quam. Nulla mi massa, molestie luctus diam quis, pellentesque auctor quam.

This is a column width file with a download button Download

Curabitur imperdiet, eros vitae bibendum fringilla, dui elit porttitor metus, et ultrices odio neque vel enim. Aenean a ante nisi. Integer fringilla laoreet ipsum, non eleifend purus dictum sed. Maecenas eget blandit quam. Maecenas faucibus non eros eget congue. Cras sed sapien in sem imperdiet ornare. Cras neque nibh, dictum non sagittis non, tincidunt eget enim. Donec bibendum est sed molestie rhoncus.

This is a column width file without a download button

Sed mollis vestibulum euismod. Etiam tempus lobortis ligula, at cursus mi imperdiet vel. Ut condimentum ex ac varius pharetra. Cras turpis quam, tincidunt eu massa maximus, volutpat consequat risus. Praesent faucibus orci vitae accumsan euismod. Duis vulputate, nunc a consequat malesuada, elit lacus lacinia elit, congue consequat leo tellus eu mi.

This is an align right file without a download button

This is an align left file with a download button Download

Phasellus vestibulum lectus vitae arcu condimentum lobortis eu a mauris. Fusce quis nulla id magna semper cursus id ut quam. Cras tempus libero turpis, eu varius leo congue id. Quisque congue quam metus, id hendrerit dui varius ut. In mi magna, sodales ac tristique eu, laoreet et risus. Suspendisse potenti. Integer in augue magna. Aenean suscipit pellentesque sagittis.

Duis vulputate, nunc a consequat malesuada, elit lacus lacinia elit, congue consequat leo tellus eu mi. Phasellus vestibulum lectus vitae arcu condimentum lobortis eu a mauris. Fusce quis nulla id magna semper cursus id ut quam. Cras tempus libero turpis, eu varius leo congue id. Quisque congue quam metus, id hendrerit dui varius ut. In mi magna, sodales ac tristique eu, laoreet et risus. Suspendisse potenti. Integer in augue magna. Aenean suscipit pellentesque sagittis.

Nunc posuere lobortis ante, vitae luctus elit aliquet eget. Phasellus auctor mollis rhoncus. Fusce eros massa, commodo in dignissim a, varius a lectus. Etiam vestibulum, felis ut placerat facilisis, lacus arcu eleifend massa, sit amet ornare metus sem quis sem. Aliquam vel ultricies augue. Quisque a lorem suscipit, bibendum nulla ut, ultrices est. Sed rutrum diam in sapien aliquam accumsan. Duis facilisis ut eros a vestibulum. Phasellus fermentum finibus purus, at lacinia augue porttitor vel. Nam id imperdiet risus.

Image

Harvard Medical School student walking on some steps. — Arvind Gupta and his team have a cool bio reactor! Photo by Winni Wintermeyer

In ac eleifend quam. Nulla mi massa, molestie luctus diam quis, pellentesque auctor quam. Curabitur imperdiet, eros vitae bibendum fringilla, dui elit porttitor metus, et ultrices odio neque vel enim. Aenean a ante nisi. Integer fringilla laoreet ipsum, non eleifend purus dictum sed. Maecenas eget blandit quam. Maecenas faucibus non eros eget congue. Cras sed sapien in sem imperdiet ornare. Cras neque nibh, dictum non sagittis non, tincidunt eget enim. Donec bibendum est sed molestie rhoncus.

The northwest corner of the campus. — Check out that letter “A.” Photo by Matthew Modoono and Adam Glanzman

A close up of the Dronino meteorite. — The Dronino meteorite, found in Russia. Karsten Moran for The New York Times

Person walking in front of Harvard Medical School sign — Regis always makes the biggest designs Photo by the Harvard Gazette

Over head photo of Smith Center — This dog is having the most fun! Harvard University

Video

This video has the following settings to show how it doesnt play nicely with the gallery — autoplay: false, loop: false, muted: false, playback controls: true, play inline: false

Cover

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus fermentum ornare. Donec cursus efficitur mi, ultrices bibendum velit ultricies eu. Sed posuere leo vel vulputate fermentum. Quisque ut ante laoreet, tincidunt nulla non, maximus est. Praesent eu efficitur velit. Pellentesque tempus lacinia nisi, id pellentesque libero rhoncus ac. Nunc feugiat justo ut tempus tempor.