decanter
Version:
Design System Tailwind CSS Preset.
821 lines (790 loc) • 79.8 kB
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr" class="smooth-scroll">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decanter Preview Environment</title>
<link rel="stylesheet" href="./css/decanter.css">
</head>
<body class="debug-screens">
<!-- MAIN DEVELOPMENT AREA -->
<a href="#top" class="skiplink">Skip to main content</a>
<div class="cc bg-digital-red pt-5 pb-1">
<a class="logo text-white hocus:text-white text-20" href="https://stanford.edu">Stanford
University</a>
</div>
<div role="banner" class="cc rs-py-6 bg-gradient-to-b from-black to-plum text-white">
<h1 class="splash-text">Decanter 7 With Tailwind Test Page.</h1>
<p class="intro-text">This is a test page filled with common HTML elements to be used to provide visual
feedback whilst building CSS systems and frameworks.</p>
</div>
<main id="top">
<!-- Nav pills -->
<header class="bg-black-20 text-white rs-py-4">
<div class="cc">
<nav aria-label="table of content">
<h2 class="type-5"><a href="#text"
class="text-black hover:underline focus:underline">Typography</a></h2>
<ul class="list-unstyled text-16 md:text-20 rs-mb-4">
<li class="inline-block mb-12"><a href="#logo"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Stanford
Logos</a></li>
<li class="inline-block mb-12"><a href="#text__headings"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Headings</a>
</li>
<li class="inline-block mb-12"><a href="#text__fluid-type"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Fluid Typography</a>
</li>
<li class="inline-block mb-12"><a href="#text__paragraphs"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Paragraphs</a>
</li>
<li class="inline-block mb-12"><a href="#text__blockquotes"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Blockquotes</a>
</li>
<li class="inline-block mb-12"><a href="#text__lists"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Lists</a>
</li>
<li class="inline-block mb-12"><a href="#text__code"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Code</a>
</li>
<li class="inline-block mb-12"><a href="#text__wysiwyg"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">WYSIWYG
Text</a></li>
<li class="inline-block mb-12"><a href="#text__inline"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Inline
elements</a></li>
</ul>
<h2 class="type-5"><a href="#color-palette"
class="text-black hover:underline focus:underline">Colors</a></h2>
<ul class="list-unstyled text-16 md:text-20 rs-mb-4">
<li class="inline-block mb-12"><a href="#color-palette"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Colors</a>
</li>
</ul>
<h2 class="type-5"><a href="#html-elements"
class="text-black hover:underline focus:underline">HTML Elements</a></h2>
<ul class="list-unstyled text-16 md:text-20 rs-mb-4">
<li class="inline-block mb-12"><a href="#drop-shadows"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Drop
Shadows</a></li>
<li class="inline-block mb-12"><a href="#text__tables"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Tables</a>
</li>
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#embedded__images">Images</a></li>
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#embedded__youtube">Embed Streaming Video</a></li>
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#embedded__audio">Audio</a></li>
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#embedded__video">Video</a></li>
<li class="inline-block mb-12"><a href="#text__hr"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Horizontal
rules</a></li>
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#embedded__meter">Meter</a></li>
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#embedded__progress">Progress</a></li>
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#embedded__svg">Inline SVG</a></li>
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#embedded__iframe">Iframes</a></li>
</ul>
<h2 class="type-5"><a href="#forms" class="text-black hover:underline focus:underline">Form
elements</a></h2>
<ul class="list-unstyled text-16 md:text-20 rs-mb-4">
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#forms__input">Input fields</a></li>
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#forms__select">Select menus</a></li>
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#forms__checkbox">Checkboxes</a></li>
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#forms__radio">Radio buttons</a></li>
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#forms__textareas">Textareas</a></li>
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#forms__html5">HTML5 inputs</a></li>
<li class="inline-block mb-12 mr-12"><a
class="inline-block py-8 px-20 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors"
href="#forms__action">Action buttons</a></li>
</ul>
<h2 class="type-5"><a href="#layouts" class="text-black hover:underline focus:underline">Layouts &
Grids</a></h2>
<ul class="list-unstyled text-16 md:text-20 rs-mb-4">
<li class="inline-block mb-12"><a href="#css-grid"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">CSS
Grid</a></li>
<li class="inline-block mb-12"><a href="#flex-grid"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Flex
Grid</a></li>
<li class="inline-block mb-12"><a href="#aspect-ratio"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Aspect
Ratio Containers</a></li>
<li class="inline-block mb-12"><a href="#cc"
class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Centered Container</a></li>
</ul>
</nav>
</div>
</header>
<!-- Typography section -->
<section class="rs-mb-3">
<header id="text" class="rs-py-4 bg-black-90">
<div class="cc">
<h2 class="type-6 text-white mb-0 text-center">Typography</h2>
</div>
</header>
<div class="cc flex flex-col md:flex-row rs-py-6 overflow-x-hidden">
<div class="mx-auto w-full lg:w-8/12">
<article id="logo" class="rs-mb-5">
<h3 class="type-5 text-lagunita-light">Stanford Logos</h3>
<div class="grid grid-cols-1 md:grid-cols-2 grid-gap">
<div>
<h4 class="type-3">Horizontal Version</h4>
<a class="logo text-cardinal-red hocus:text-cardinal-red type-3"
href="https://stanford.edu">Stanford University</a>
</div>
<div>
<h4 class="type-3">Stacked Version</h4>
<a class="logo text-cardinal-red hocus:text-cardinal-red type-3"
href="https://stanford.edu">Stanford<br>University</a>
</div>
</div>
</article>
<article id="text__headings" class="rs-mb-5">
<h3 class="type-5 text-lagunita-light">Headings & Display Type</h3>
<div>
<span class="splash-text rs-mb-0">Splash Text</span>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
</article>
<article id="text__fluid-type" class="rs-mb-5 lg:w-[140%] lg:-ml-[20%]">
<h3 class="type-5 text-lagunita-light">Fluid Typography</h3>
<div>
<div class="fluid-type-4">Fluid type 4</div>
<div class="fluid-type-5">Fluid type 5</div>
<div class="fluid-type-6">Fluid type 6</div>
<div class="fluid-type-7">Fluid type 7</div>
<div class="fluid-type-8">Fluid type 8</div>
<div class="fluid-type-9">Fluid type 9</div>
<div class="fluid-type-10">Fluid type 10</div>
</div>
</article>
<article id="text__paragraphs" class="rs-mb-5">
<div>
<h3 class="type-5 text-lagunita-light">Paragraphs</h3>
<div class="rs-mb-4">
<h4 class="type-4">Intro and Paragraph (Base Font Size 21px)</h4>
<p class="intro-text">Intro text max-width is 65ch. A paragraph (from the Greek paragraphos, “to
write beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> in writing
dealing with a particular point or idea.</p>
<p><strong>Regular paragraph</strong> (from the Greek paragraphos, “to write beside” or “written
beside”) is a <a href="#">self-contained unit of a discourse</a> 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.
</p>
<p class="big-paragraph"><strong>Big paragraph</strong> (from the Greek paragraphos, “to write
beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> 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.</p>
<p class="card-paragraph"><strong>Card paragraph</strong> (from the Greek paragraphos, “to write
beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> 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.</p>
</div>
<h2>Comparison of Different Base Font Size Options</h2>
<div class="basefont-19 rs-mb-4">
<h3 class="font-serif">H3 .basefont-19</h3>
<p class="intro-text">Intro text max-width is 65ch. A paragraph (from the Greek paragraphos, “to
write beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> in writing
dealing with a particular point or idea.</p>
<p><strong>Regular paragraph</strong> (from the Greek paragraphos, “to write beside” or “written
beside”) is a <a href="#">self-contained unit of a discourse</a> 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.
</p>
<p class="big-paragraph"><strong>Big paragraph</strong> (from the Greek paragraphos, “to write
beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> 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.</p>
<p class="card-paragraph"><strong>Card paragraph</strong> (from the Greek paragraphos, “to write
beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> 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.</p>
</div>
<div class="basefont-20 rs-mb-4">
<h3 class="font-serif">H3 .basefont-20</h3>
<p class="intro-text">Intro text max-width is 65ch. A paragraph (from the Greek paragraphos, “to
write beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> in writing
dealing with a particular point or idea.</p>
<p><strong>Regular paragraph</strong> (from the Greek paragraphos, “to write beside” or “written
beside”) is a <a href="#">self-contained unit of a discourse</a> 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.
</p>
<p class="big-paragraph"><strong>Big paragraph</strong> (from the Greek paragraphos, “to write
beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> 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.</p>
<p class="card-paragraph"><strong>Card paragraph</strong> (from the Greek paragraphos, “to write
beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> 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.</p>
</div>
<div class="rs-mb-4">
<h3 class="font-serif">H3 Default body font size (21px)</h3>
<p class="intro-text">Intro text max-width is 65ch. A paragraph (from the Greek paragraphos, “to
write beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> in writing
dealing with a particular point or idea.</p>
<p><strong>Regular paragraph</strong> (from the Greek paragraphos, “to write beside” or “written
beside”) is a <a href="#">self-contained unit of a discourse</a> 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.
</p>
<p class="big-paragraph"><strong>Big paragraph</strong> (from the Greek paragraphos, “to write
beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> 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.</p>
<p class="card-paragraph"><strong>Card paragraph</strong> (from the Greek paragraphos, “to write
beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> 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.</p>
</div>
<div class="basefont-22 rs-mb-4">
<h3 class="font-serif">H3 .basefont-22</h3>
<p class="intro-text">Intro text max-width is 65ch. A paragraph (from the Greek paragraphos, “to
write beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> in writing
dealing with a particular point or idea.</p>
<p><strong>Regular paragraph</strong> (from the Greek paragraphos, “to write beside” or “written
beside”) is a <a href="#">self-contained unit of a discourse</a> 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.
</p>
<p class="big-paragraph"><strong>Big paragraph</strong> (from the Greek paragraphos, “to write
beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> 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.</p>
<p class="card-paragraph"><strong>Card paragraph</strong> (from the Greek paragraphos, “to write
beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> 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.</p>
</div>
<div class="basefont-23 rs-mb-4">
<h3 class="font-serif">H3 .basefont-23</h3>
<p class="intro-text">Intro text max-width is 65ch. A paragraph (from the Greek paragraphos, “to
write beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> in writing
dealing with a particular point or idea.</p>
<p><strong>Regular paragraph</strong> (from the Greek paragraphos, “to write beside” or “written
beside”) is a <a href="#">self-contained unit of a discourse</a> 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.
</p>
<p class="big-paragraph"><strong>Big paragraph</strong> (from the Greek paragraphos, “to write
beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> 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.</p>
<p class="card-paragraph"><strong>Card paragraph</strong> (from the Greek paragraphos, “to write
beside” or “written beside”) is a <a href="#">self-contained unit of a discourse</a> 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.</p>
</div>
</div>
</article>
<article id="text__blockquotes" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Blockquotes</h3>
</header>
<div>
<blockquote>
<p>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.</p>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size
quotation. It may or may not include a citation, usually placed at the bottom.</p>
<cite>Said no one, ever</cite>
</blockquote>
</div>
</article>
<article id="text__lists" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Lists</h3>
</header>
<h4 class="type-4">Definition List</h4>
<dl class="rs-mb-3">
<dt>Definition List Title 1</dt>
<dd>This is a definition list division.</dd>
<dt>Definition List Title 2</dt>
<dd>This is a definition list division.</dd>
</dl>
<h4 class="type-4">Ordered List</h4>
<ol class="rs-mb-3">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<h4 class="type-4">Unordered List</h4>
<ul class="rs-mb-3">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</article>
<article id="text__code" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Code & Preformatted Text</h3>
</header>
<div>
<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
<p><strong>Inline code:</strong> <code><div>code</div></code></p>
<p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
<h4 class="type-4">Pre-formatted Text</h4>
<pre>
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 { | } ~
</pre>
</div>
</article>
<article id="text__wysiwyg" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">WYSIWYG Content</h3>
</header>
<div class="wysiwyg">
<h2>Heading Level 2</h2>
<p>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.</p>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size
quotation. It may or may not include a citation, usually placed at the bottom.</p>
<h2>Heading Level 2 (Stacking)</h2>
<h3>Heading Level 3</h3>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size
quotation. It may or may not include a citation, usually placed at the bottom.</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<h4>Heading Level 4</h4>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size
quotation. It may or may not include a citation, usually placed at the bottom.</p>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<h5>Heading Level 5</h5>
<p>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.</p>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size
quotation. It may or may not include a citation, usually placed at the bottom.</p>
<h6>Heading Level 6</h6>
<p>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.</p>
</div>
</article>
<article id="text__inline" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Inline Styles</h3>
</header>
<div>
<p><a href="#!">This is a text link</a>.</p>
<p><strong>Strong is used to indicate strong importance.</strong></p>
<p><em>This text has added emphasis.</em></p>
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance.
</p>
<p>The <i>i element</i> is text that is offset from the normal text.</p>
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.
</p>
<p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
<p><s>This text has a strikethrough</s>.</p>
<p>Superscript<sup>®</sup>.</p>
<p>Subscript for things like H<sub>2</sub>O.</p>
<p><small>This small text is small for for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline
quotation.</q></p>
<p><cite>This is a citation.</cite></p>
<p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p>The <mark>mark element</mark> indicates a highlight.</p>
<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
<p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
</div>
</article>
</div>
</div>
</section>
<section class="rs-mb-3">
<header id="color-palette" class="rs-py-4 bg-black-90">
<div class="cc">
<h2 class="type-6 text-white mb-0 text-center">Colors</h2>
</div>
</header>
<div class="cc flex flex-col md:flex-row rs-py-6 overflow-x-hidden">
<div class="mx-auto w-full lg:w-8/12">
<article id="color-palette-black" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Black</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-black-true">
black-true</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-black">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-black-90">
black-90</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-black-80">
black-80</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-black-70">
black-70</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-black-60">
black-60</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-black-50">
black-50</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-black-40">
black-40</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-black-30">
black-30</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-black-20">
black-20</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-black-10">
black-10</div>
</div>
</article>
<article id="color-palette-white" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">White</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-white">
white</div>
</div>
</article>
<article id="color-palette-digital-red" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Digital Red</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-digital-red">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-digital-red-dark">
digital-red-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-digital-red-light">
digital-red-light</div>
</div>
</article>
<article id="color-palette-digital-blue" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Digital Blue</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-digital-blue">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-digital-blue-dark">
digital-blue-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-digital-blue-light">
digital-blue-light</div>
</div>
</article>
<article id="color-palette-digital-green" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Digital Green</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-digital-green">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-digital-green-dark">
digital-green-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-digital-green-light">
digital-green-light</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-digital-green-bright">
digital-green-bright</div>
</div>
</article>
<article id="color-palette-palo-alto" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Palo Alto</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-palo-alto">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-palo-alto-dark">
palo-alto-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-palo-alto-light">
palo-alto-light</div>
</div>
</article>
<article id="color-palette-palo-verde" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Palo Verde</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-palo-verde">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-palo-verde-dark">
palo-verde-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-palo-verde-light">
palo-verde-light</div>
</div>
</article>
<article id="color-palette-olive" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Olive</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-olive">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-olive-dark">
olive-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-olive-light">
olive-light</div>
</div>
</article>
<article id="color-palette-bay" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Bay</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-bay">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-bay-dark">
bay-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-bay-light">
bay-light</div>
</div>
</article>
<article id="color-palette-sky" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Sky</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-sky">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-sky-dark">
sky-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-sky-light">
sky-light</div>
</div>
</article>
<article id="color-palette-lagunita" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Lagunita</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-lagunita">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-lagunita-dark">
lagunita-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-lagunita-light">
lagunita-light</div>
</div>
</article>
<article id="color-palette-poppy" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Poppy</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-poppy">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-poppy-dark">
poppy-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-poppy-light">
poppy-light</div>
</div>
</article>
<article id="color-palette-spirited" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Spirited</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-spirited">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-spirited-dark">
spirited-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-spirited-light">
spirited-light</div>
</div>
</article>
<article id="color-palette-illuminating" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Illuminating</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-illuminating">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-illuminating-dark">
illuminating-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-illuminating-light">
illuminating-light</div>
</div>
</article>
<article id="color-palette-plum" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Plum</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-plum">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-plum-dark">
plum-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-plum-light">
plum-light</div>
</div>
</article>
<article id="color-palette-brick" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Brick</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-brick">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-brick-dark">
brick-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-brick-light">
brick-light</div>
</div>
</article>
<article id="color-palette-archway" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Archway</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-archway">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-archway-dark">
archway-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-archway-light">
archway-light</div>
</div>
</article>
<article id="color-palette-stone" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Stone</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-stone">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-white bg-stone-dark">
stone-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-stone-light">
stone-light</div>
</div>
</article>
<article id="color-palette-fog" class="rs-mb-5">
<header>
<h3 class="type-5 text-lagunita-light">Fog</h3>
</header>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-fog">
Default</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-fog-dark">
fog-dark</div>
<div
class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-fog-light">
fog-light</div>
</div>
</article>
</div>
</div>
</section>
<!-- HTML Elements section -->
<section class="rs-mb-3">
<header id="html-elements" class="rs-py-4 bg-black-90">
<div class="cc">
<h2 class="type-6 text-whit