-
Notifications
You must be signed in to change notification settings - Fork 0
/
styleguide.html
1 lines (1 loc) · 5.13 KB
/
styleguide.html
1
<!DOCTYPE html><html data-wf-page="662f6bbf7dd890cd0c434af7" data-wf-site="662f6bbe7dd890cd0c434a8b"><head><meta charset="utf-8"/><title>Styleguide</title><meta content="Styleguide" property="og:title"/><meta content="Styleguide" property="twitter:title"/><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="Webflow" name="generator"/><link href="css/webflow-style.css" rel="stylesheet" type="text/css"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><script type="text/javascript">WebFont.load({ google: { families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"] }});</script><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="images/favicon.png" rel="shortcut icon" type="image/x-icon"/><link href="images/app-icon.png" rel="apple-touch-icon"/></head><body><div data-collapse="medium" data-animation="default" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navigation w-nav"><div class="navigation-items"><a href="/" class="logo-link w-nav-brand"><img src="images/portfolio-logo-402x.png" width="104" alt="" class="logo-image"/></a><div class="navigation-wrap"><nav role="navigation" class="navigation-items w-nav-menu"><a href="/" class="navigation-item w-nav-link">Home</a><a href="/about" class="navigation-item w-nav-link">About</a><a href="/styleguide" aria-current="page" class="navigation-item w-nav-link w--current">Styleguide</a></nav><div class="menu-button w-nav-button"><img src="images/menu-icon.png" width="22" alt="" class="menu-icon"/></div></div></div></div><div class="section"><div class="styleguide-header-wrap"><div class="heading-jumbo">Styleguide</div><div class="paragraph-bigger cc-bigger-light">Source of truth of this template.</div></div><div class="container"><div class="styleguide-content-wrap"><div class="styleguide-block"><div class="label cc-styleguide-label">Headings</div><div class="heading-jumbo">Heading Jumbo</div><div class="heading-jumbo-small">Heading Jumbo</div><div class="heading-jumbo-tiny">Heading Jumbo</div><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><div class="divider"></div><div class="styleguide-block"><div class="label cc-styleguide-label">Paragraphs & Links</div><p class="paragraph-bigger">Paragraph-bigger</p><p>Paragraph</p><p class="paragraph-light">Paragraph-de-emphasized</p><p class="paragraph-small">Paragraph-smaller</p><p class="paragraph-tiny">Paragraph-tiny</p><div class="label">Label</div><a href="#">A text link</a></div><div class="divider"></div><div class="styleguide-block"><div class="label cc-styleguide-label">Buttons & Form Elements</div><div class="styleguide-button-wrap"><a href="#" class="button w-inline-block"><div>Explore</div></a></div><div class="styleguide-button-wrap"><a href="#" class="button cc-jumbo-button w-inline-block"><div>Explore</div></a></div></div><div class="divider"></div><div class="styleguide-block"><div class="label cc-styleguide-label">Rich Text Element</div><div class="rich-text w-richtext"><h2>What’s a Rich Text element?</h2><p>The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. </p><blockquote>The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.</blockquote><h4>Static and dynamic content editing</h4><p>A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!</p><figure style="max-width:1306px" class="w-richtext-align-fullwidth w-richtext-figure-type-image"><div><img src="images/placeholder-201.svg" alt=""/></div><figcaption>Image caption</figcaption></figure><h4>How to customize formatting for each rich text</h4><p>Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.</p><ul role="list"><li>The rich text element allows you to create and format headings</li><li>Headings, paragraphs, blockquotes, figures, images, and figure captions</li><li>A rich text element can be used with static or dynamic content.</li></ul></div></div></div></div></div><script src="js/jquery.js" type="text/javascript" ></script><script src="js/webflow-script.js" type="text/javascript"></script></body></html>