fotocasa-design-system
Version:
Fotocasa design system
312 lines (206 loc) • 7.61 kB
HTML
<html>
<head>
<link href="../assets/../theme-assets/css/patternpack-theme.css" rel="stylesheet" />
<link href="../assets/../theme-assets/css/github.css" rel="stylesheet" />
<link href="../assets/css/patterns.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atoms</title>
</head>
<body>
<div id="libraryContainer" class="pp-container">
<header class="pp-header">
<a href="/">
<img src="/theme-assets/images/logo.svg" class="pp-header__logo">
</a>
<div id="menuToggle" class="pp-menu-toggle">
<div class="pp-menu-toggle__hamburger">Menu</div>
</div>
</header>
<div id="libraryContent" class="pp-content">
<div class="markdown__body">
<p>
<h1>Atoms</h1>
</p>
<p>TODO: Describe what an atom is</p>
<p>
<a name="buttons"></a>
<div class="markdown__body">
<h2 id="buttons">Buttons</h2>
</p>
<p>
<p>TODO: Describe what buttons are and how they are used in the application.</p>
</p>
<p>
<h3 id="examples">Examples</h3>
</p>
<div class="library__example">
<button type="button" class="button">Button</button>
<button type="button" class="button button--small">Button Small</button>
<button type="button" class="button button--large">Button Large</button>
<br />
<br />
<button type="button" class="button button--primary">Button Primary</button>
<button type="button" class="button button--accent">Button Accent</button>
<br />
<br />
<button type="button" class="button button--small button--primary">Button Small Primary</button>
<button type="button" class="button button--large button--primary">Button Large Primary</button>
</div>
<p>
<h3 id="code">Code</h3>
</p>
<pre><code class="language-html"><button type="button" class="button">Button</button>
<button type="button" class="button button--small">Button Small</button>
<button type="button" class="button button--large">Button Large</button>
<button type="button" class="button button--primary">Button Primary</button>
<button type="button" class="button button--accent">Button Accent</button>
<button type="button" class="button button--small button--primary">Button Small Primary</button>
<button type="button" class="button button--large button--primary">Button Large Primary</button></code></pre>
<p>
</div>
</p>
<p>
<a name="forms"></a>
<div class="markdown__body">
<h2 id="forms">Forms</h2>
</p>
<p>
<p>TODO: </p>
</p>
<p>
<h3 id="examples">Examples</h3>
</p>
<p>
<p>TODO:</p>
</p>
<p>
<h3 id="code">Code</h3>
</p>
<pre><code class="language-html">
</code></pre>
<p>
</div>
</p>
<p>
<a name="headings"></a>
<div class="markdown__body">
<h2 id="headings">Headings</h2>
</p>
<p>
<p>TODO: </p>
</p>
<p>
<h3 id="examples">Examples</h3>
</p>
<p>
<p>TODO:</p>
</p>
<p>
<h3 id="code">Code</h3>
</p>
<pre><code class="language-html">
</code></pre>
<p>
</div>
</p>
<p>
<a name="typography"></a>
<div class="markdown__body">
<h2 id="typography">Typography</h2>
</p>
<p>
<p>Miscellaneous typographic styles within the app</p>
</p>
<p>
<h3 id="examples">Examples</h3>
</p>
<div class="library__example">
<strong>strong</strong>
</div>
<p>
<h3 id="code">Code</h3>
</p>
<pre><code class="language-html"><strong>strong</strong></code></pre>
<p>
</div>
</p>
<p>
<a name="colors"></a>
<div class="markdown__body">
<h2 id="colors">Colors</h2>
</p>
<p>
<p>These are Colors in the Application</p>
</p>
<p>
<h3 id="examples">Examples</h3>
</p>
<div class="library__example">
<div class="library__color-swatch">
<span class="library__color-swatch__preview" style="background-color: #AC0023"></span>
<ul class="library__color-swatch__details">
<li><strong>Red</strong> </li>
<li>#AC0023</li>
<li>$color-red</li>
</ul>
</div>
<div class="library__color-swatch">
<span class="library__color-swatch__preview color-black"></span>
<ul class="library__color-swatch__details">
<li><strong>color-black</strong> </li>
<li>#000</li>
<li>$_color-black</li>
</ul>
</div>
<div class="library__color-swatch">
<span class="library__color-swatch__preview" style="background-color: #F5E93D"></span>
<ul class="library__color-swatch__details">
<li><strong>Yellow</strong> </li>
<li>#F5E93D</li>
<li>$color-yellow</li>
</ul>
</div>
</div>
<p>
</div>
</p>
</div>
</div>
<div id="menuOverlay" class="pp-open-overlay"></div>
</div>
<nav class="pp-nav">
<h2 class="pp-nav__heading">
<a href="
index.html
">Atoms</a>
</h2>
<ul>
<li> <a href="buttons.html">Buttons</a> </li>
<li> <a href="colors.html">Colors</a> </li>
<li> <a href="forms.html">Forms</a> </li>
<li> <a href="headings.html">Headings</a> </li>
<li> <a href="typography.html">Typography</a> </li>
</ul>
<h2 class="pp-nav__heading">
<a href="
../molecules/index.html
">Molecules</a>
</h2>
<ul>
<li> <a href="../molecules/nav.html">Navigation</a> </li>
</ul>
<h2 class="pp-nav__heading">
<a href="
../pages/index.html
">Pages</a>
</h2>
<ul>
<li> <a href="../pages/article-template.html">Article Template</a> </li>
<li> <a href="../pages/home-page.html">Home Page</a> </li>
</ul>
</nav>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script src="../assets/../theme-assets/js/PatternPack.Global.Navigation.js"></script>
</body>
</html>