This demo page will showcase the various styles available in the Digital Scholarship theme. Note that the theme is currently set to use the default (Blue) color scheme. Other pages below this one showcase the other color schemes.

Headings

Note that the page title is a heading level one and that the above heading is a heading level two.

H3 Heading

Spacer paragraph

H4 Heading

Spacer paragraph

H5 Heading

Spacer paragraph

H6 Heading

Spacer paragraph

Paragraphs

Here is some lorem ipsum filler text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quam vulputate dignissim suspendisse in est ante. Eget egestas purus viverra accumsan in nisl nisi scelerisque. Sed blandit libero volutpat sed cras ornare arcu dui vivamus. Semper eget duis at tellus at urna condimentum. Auctor eu augue ut lectus arcu bibendum at varius vel. Quisque egestas diam in arcu cursus euismod quis. Proin sed libero enim sed faucibus turpis in. Blandit aliquam etiam erat velit scelerisque in dictum non. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. Eu augue ut lectus arcu bibendum. At lectus urna duis convallis. Aliquet nec ullamcorper sit amet risus nullam.

Ac odio tempor orci dapibus. Donec enim diam vulputate ut pharetra sit. Integer feugiat scelerisque varius morbi. Nunc id cursus metus aliquam eleifend. Suspendisse interdum consectetur libero id faucibus. Nulla aliquet enim tortor at auctor. Lacinia quis vel eros donec ac. Egestas dui id ornare arcu odio ut. Vestibulum lectus mauris ultrices eros. Sodales ut etiam sit amet nisl purus in mollis nunc.

And a horizontal rule:

Lists

Unordered List

• Item
• Really long item: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam elementum pulvinar etiam non quam lacus. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus.
• Item
  • Item
    • Item
      • Item

Ordered List

1. Item
2. Item
   1. Really long item: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam elementum pulvinar etiam non quam lacus. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus.
   2. Item
3. Item
   1. Item
      1. Item
      2. Item
      3. Item
         1. Item
         2. Item
   2. Item
4. Item

Description List

This is a less common list style and may not be recognized by screen readers the same way other lists are.

JavaScript

JavaScript is the world's most popular (according to W3Schools) programming language and possibly the most hated-on (according to Reddit). It is a scripting language that can be found on just about every website you will ever visit.

HTML

HTML is the standard markup language for web pages. It stands for HyperText Markup Language.

CSS

Cascading Style Sheets

Semantic Text Elements

These are meaningful styles you can apply to text content. For example, "Keyboard Input" would be used to indicate keys someone would be expected to press to perform some action. Make sure to check the theme accessibility documentation to see which of these will be indicated to screen reader users. If the style you are using is not listed, make sure that any meaning conveyed with the style is also presented via text so that it is accessible to all users.

The styles with "(markdown)" can be added using markdown. Other styles will require HTML.

1. Bold (markdown)
2. Italic (markdown)
3. Inline Quotation
4. Citation
5. Sample Text
6. Keyboard Input
7. Sample Code (markdown)
8. Deleted Text (markdown)
9. Inserted Text
10. Marked Text (highlighted)
11. Incorrect Text (strikethrough)
12. Text with _Subscript added
13. Text with ^Superscript added

Links and Buttons

Links

Here is a normal link inside of a paragraph. Check a markdown cheatsheet for the correct syntax to include a link in your content. Note that the previous link is an external link and will open in a new tab. This next link, to the Digital Scholarship theme readme is a same-site link and will open in the same page.

Buttons

These buttons have no function.

Images

Note: All images displayed were photographed by Wendy Acker and have CC BY-SA-NC licenses.

By default, images will take up as much space as they are given. You can limit this by giving an image the class "medium" (read about Media in the grav documentation to learn more about how to add classes or other values to images in markdown). Below is a normal image with no specific classes:

Here is a different image with the class medium. This image is also a link.

Image Figure

If you want to add a caption to an image, one way to do this would be to enclose the image in a figure element. You can do this without HTML if you have the Shortcode Core plugin (required for Leaflet Tour).

Tables

Below is a simple table with a caption. You can create a table like this using markdown if you do not want a caption, but unfortunately you do have to use HTML instead if you want to add a caption.

Blockquotes

This is a simple block quote with no attribution. People sometimes like to use blockquotes to emphasize text on a page, but remember that the blockquote element (whether created using markdown or HTML) must be an actual quote. While your meaning is likely to be understood regardless, using a blockquote for anything other than a direct quotation is semantically inaccurate and therefore likely to be a WCAG (Web Content Accessibility Guidelines) failure.

You can't believe everything you read on the internet.

This is a more complicated block quote with attribution (enclosed in a figure element).

Code Blocks

You will need to add a syntax highlighting plugin to get the most out of code blocks. However, here is what it looks like without one:

let obj_1 = { a: 10, b: 20 };
let obj_2 = obj_1;
obj_2.c = 30;
console.log(obj_1); // will include the new attribute c