Blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Headings

Web Fonts Variable Fonts

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Inline Elements

Examples from https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics

<a>: This is a text link inside an anchor.

<abbr>: Abbreviation HTML and requires a title attribute.

<b>: "Bring attention to" element used to draw the reader’s attention.

<cite>: This is a citation and requires a title attribute.

<code>: Inline code with the <code> element.

<del>: This text is to be deleted. (Editor’s marks group)

<dfn>: The dfn element indicates a definition and requires a title attribute.

<em>: This text has added emphasis.

<i>: This text has added emphasis as well but no semantic weight due to the HTML Idiomatic Text element.

<ins>: This text is to be inserted. (Editor’s marks group)

<kbd>: Keyboard input noted as such Cmd.

<mark>: The mark element indicates a highlight. (Editor’s marks group)

<q>: This text is a short inline quotation. Curly quotes should be used and quote marks should change based on langauge.

<s>: This text has a strikethrough for purposes of removal at a later date. (Editor’s marks group)

<samp>: This is sample output from a computer program.

<small>: Fine print Get out your reading glasses.

<strong>: Strong is used to indicate strong importance.

<sub>: Subscript for things like H2O.

<sup>: Superscript[1].

<time>:

<u>: The HTML Unarticulated Annotation element represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. Use with caution, as underlines indicate links!

<var>: The variable element, such as x = y.

Paragraph

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Preformatted Text

  	
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 

Hr


Unordered

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item

Ordered

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item

Definition

Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.

Landscape 4 X 3

4x3 Image

Landscape 16 X 9

16x9 Image

Square

Square Thumbnail

Avatar

Person Name

Icons

Loading Icon

Loading

Favicon

Text Fields

Select Menu

Checkbox

Checkbox *

Radio Buttons

Radio

Html 5 Inputs

Salesforce Form

Student Information
Parent/ Guardian Information

Primary Insurance Details

Secondary Insurance Details

Authorization to Test

By checking the box below, I attest that I, [Parent/Guardian name], authorize healthcare providers affiliated with RI public schools (including school nurses, school nurse teachers, physicians, or other medical actors and agents) to test my child or legal charge for COVID-19 upon determining that such testing is appropriate. I understand that this testing may occur at multiple points throughout the 2020-2021 school year. I will contact the school nurse to revoke this authorization, if I wish for testing activity to cease. By signing this form, I am attesting that I have the requisite legal authority and power to make the decisions for, and on behalf of, the student named above that I am making on this form.

I Consent

Cancel  

Search Submit

Buttons

Table

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

Google Table

Testing Sites for Out-of-State Travelers who don’t have COVID-19 Symptoms.

00 A Palettes

  • Scarborough Beach: .qh__t__scarborough
  • Scarborough Beach dark: .qh__t__scarborough--dark
  • Federal Hill: .qh__t__federal-hill
  • Federal Hill dark: .qh__t__federal-hill--dark
  • Wickaboxet Forest: .qh__t__wickaboxet
  • Wickaboxet Forest dark: .qh__t__wickaboxet--dark
  • Block Island Lighthouse: .qh__t__block-island
  • Block Island Lighthouse: .qh__t__block-island--dark
  • Blue Shutters Beach: .qh__t__blue-shutters
  • Blue Shutters Beach: .qh__t__blue-shutters--dark

00 B Colors

  • White: hsl(0, 0%, 100%) var(--c__white)
  • White 33% transparent: hsla(0, 0%, 100%, 0.33) var(--c__white--trans33)
  • White 25% transparent: hsla(0, 0%, 100%, 0.25) var(--c__white--trans25)
  • White 15% transparent: hsla(0, 0%, 100%, 0.15) var(--c__white--trans15)
  • White 100% transparent: transparent var(--c__transparent)
  • Quahog dark: hsl(0, 0%, 8%) var(--c__quahog--darker)
  • Quahog dark 33% transparent: hsla(0, 0%, 8%, 0.33) var(--c__quahog--dark--trans33)
  • Quahog dark 25% transparent: hsla(0, 0%, 8%, 0.25) var(--c__quahog--dark--trans25)
  • Quahog dark 15% transparent: hsla(0, 0%, 8%, 0.15) var(--c__quahog--dark--trans15)
  • Quahog: hsl(0, 0%, 18%) var(--c__quahog--dark)
  • Quahog: hsl(0, 0%, 25%) var(--c__quahog)
  • Quahog medium: hsl(0, 0%, 43%) var(--c__quahog--medium)
  • Quahog light: hsl(0, 0%, 83%) var(--c__quahog--light)
  • Quahog lightest: hsl(0, 0%, 95%) var(--c__quahog--lightest)
  • Navy dark: hsl(224, 37%, 17%) var(--c__navy--dark)
  • Navy: hsl(224, 36%, 25%) var(--c__navy)
  • Navy 50% transparent: hsla(224, 36%, 25%, 0.5) var(--c__navy--trans50)
  • Navy light: hsl(224, 54%, 73%) var(--c__navy--light)
  • Navy saturated: hsl(224, 80%, 40%) var(--c__navy--sat)
  • Navy saturated light: hsl(224, 60%, 55%) var(--c__navy--sat-lgt)
  • Navy warm: hsl(244, 45%, 54%) var(--c__navy--warm)
  • Navy warm light: hsl(254, 62%, 80%) var(--c__navy--wrm-lgt)
  • Rhody Red dark: hsl(356, 47%, 38%) var(--c__rhody-red--dark)
  • Rhody Red: hsl(360, 79%, 62%) var(--c__rhody-red)
  • Rhody Red 50% transparent: hsla(360, 79%, 62%, 0.5) var(--c__rhody-red--trans50)
  • Rhody Red 15% transparent: hsla(360, 79%, 62%, 0.15) var(--c__rhody-red--trans15)
  • Calamari: hsl(23, 100%, 64%) var(--c__calamari)
  • Hope Gold: hsl(46, 95%, 61%) var(--c__hope-gold)
  • Green Animals: hsl(110, 49%, 51%) var(--c__green-animals)
  • Green Animals dark: hsl(110, 59%, 30%) var(--c__green-animals--dark)
  • Green Animals 15% transparent: hsla(110, 49%, 51%, 0.14) var(--c__green-animals--trans15)
  • Cliff Walk darkest: hsl(160, 75%, 30%) var(--c__cliff-walk--darkest)
  • Cliff Walk darkest 15% transparent: hsla(160, 75%, 30%, 0.15) var(--c__cliff-walk--darkest--trans15)
  • Cliff Walk dark: hsl(160, 85%, 60%) var(--c__cliff-walk--dark)
  • Cliff Walk 33% transparent: hsla(160, 85%, 60%, 0.25) var(--c__cliff-walk--dark--trans25)
  • Cliff Walk: hsl(160, 100%, 74%) var(--c__cliff-walk)
  • Cliff Walk light: hsl(160, 75%, 88%) var(--c__cliff-walk--light)
  • Ocean State dark: hsl(208, 12%, 32%) var(--c__ocean--dark)
  • Ocean State: hsl(208, 54%, 73%) var(--c__ocean)
  • Ocean State light: hsl(208, 58%, 92%) var(--c__ocean--light)
  • Ocean State 25% transparent: hsla(208, 54%, 73%, 0.25) var(--c__ocean--trans25)
  • Ocean State 10% transparent: hsla(208, 54%, 73%, 0.1) var(--c__ocean--trans10)
  • Coffee Milk: hsl(47, 26%, 76%) var(--c__coffee-milk)
  • Coffee Milk light: hsl(47, 27%, 92%) var(--c__coffee-milk--light)
  • Coffee Milk 25% transparent: hsla(47, 26%, 76%, 0.25) var(--c__coffee-milk--trans25)
  • Coffee Milk 10% transparent: hsla(47, 26%, 76%, 0.1) var(--c__coffee-milk--trans10)

00 C A 11 Y Contrast

coffee-milk--trans10 coffee-milk--trans25 coffee-milk--light coffee-milk ocean--trans10 ocean--trans25 ocean--light ocean ocean--dark cliff-walk--light cliff-walk cliff-walk--dark--trans25 cliff-walk--dark cliff-walk--darkest--trans15 cliff-walk--darkest green-animals--trans15 green-animals--dark green-animals hope-gold calamari rhody-red--trans15 rhody-red--trans50 rhody-red rhody-red--dark navy--wrm-lgt navy--warm navy--sat-lgt navy--sat navy--light navy--trans50 navy navy--dark quahog--lightest quahog--light quahog--medium quahog quahog--dark quahog--dark--trans15 quahog--dark--trans25 quahog--dark--trans33 quahog--darker white--trans15 white--trans25 white--trans33 white
coffee-milk--trans10
coffee-milk--trans25
coffee-milk--light
coffee-milk
ocean--trans10
ocean--trans25
ocean--light
ocean
ocean--dark
cliff-walk--light
cliff-walk
cliff-walk--dark--trans25
cliff-walk--dark
cliff-walk--darkest--trans15
cliff-walk--darkest
green-animals--trans15
green-animals--dark
green-animals
hope-gold
calamari
rhody-red--trans15
rhody-red--trans50
rhody-red
rhody-red--dark
navy--wrm-lgt
navy--warm
navy--sat-lgt
navy--sat
navy--light
navy--trans50
navy
navy--dark
quahog--lightest
quahog--light
quahog--medium
quahog
quahog--dark
quahog--dark--trans15
quahog--dark--trans25
quahog--dark--trans33
quahog--darker
white--trans15
white--trans25
white--trans33
white

Fonts

Primary font: "Work Sans", "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font italic: "Work Sans", "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font bold: "Work Sans", "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Secondary font: "Roboto Slab", Georgia, Times, "Times New Roman", serif;

Secondary font bold: "Roboto Slab", Georgia, Times, "Times New Roman", serif;

Animations

Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)
Movement: Duration: 0.8s Easing: ease-in-out; (Hover to see effect)

Visibility

This text is hidden visually but not from screen readers