The elegant and reliable UI kit for web artisans. https://jupiterui.codeberg.page/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

867 lines
32 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<title>JupiterUI</title>
<link rel="stylesheet" href="dist/jupiterui.css" />
<link rel="stylesheet" href="extensions/Vivus/vivus.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
</head>
<body class="relative">
<noscript>
<div class="w-100p bg-accent sticky top-0 text-c py-0-5r text-white z-999">
<span>Jupiter works best with JavaScript enabled.</span>
</div>
</noscript>
<div id="app" class="relative">
<div id="root" class="vis">
<div class="h-100p fixed top-0 bottom-0 right-20 flex-c landscape-hide">
<div class="radius-90 p-0-5r flex-c" id="color-container">
<a data-color="red" class="j-color red mb-0-5r"></a>
<a data-color="orange" class="j-color orange mb-0-5r"></a>
<a data-color="magenta" class="j-color magenta mb-0-5r"></a>
<a data-color="purple" class="j-color purple mb-0-5r"></a>
<a data-color="blue" class="j-color blue mb-0-5r"></a>
<a data-color="cyan" class="j-color cyan mb-0-5r"></a>
<a data-color="teal" class="j-color teal mb-0-5r"></a>
<a data-color="green" class="j-color green"></a>
</div>
</div>
<div data-tfn="true" class="w-100p ui top-0 sticky border-bottom-ui-1">
<div class="container lg landscape-mw-100p landscape-p-0">
<div class="w-100p h-100p grid grid-3">
<div class="grid-block">
<a href="/" class="shallow-link text-dynamic py-1r ph-1r flex-c">
<div class="flex flex-row align-s">
<span class="fs-lg fw-600">Jupiter<span class="text-accent">UI</span></span>
<p class="fs-2xs text-dynamic-06 ml-0-25r mb-0 portrait-hide">(v4.3.0)</p>
</div>
</a>
</div>
<div class="grid-block flex-c"></div>
<div class="grid-block flex flex-row align-c justify-e">
<a class="portrait-hide shallow-link h-100p ph-0-75r flex-c text-dynamic"
data-randomize="true"><i class="j-icon mr-12 ml-0" data-icon="color_swatch"></i></a>
<a class="portrait-hide shallow-link h-100p ph-0-75r mr-0-75r flex-c text-dynamic"
data-toggle-theme="true"><i class="j-icon mr-12 ml-0" data-theme-icon="moon"></i></a>
<a class="j-button xs radius-90 mr-1-5r" href="https://codeberg.org/JupiterUI/JupiterUI"
rel="noreferrer" target="_blank">Get started <i class="j-icon sm landscape-hide"
data-icon="right_arrow"></i></a>
</div>
</div>
</div>
</div>
<section class="section flex-c bg-accent-10 dark-bg-accent-100 border-bottom-ui-1" id="Home"
data-anchor="true">
<div class="container flex-c lg">
<div class="mw-50r flex-c text-c vivus-xs">
<div class="delay-100" data-animate="v-fade-in-up">
<h1 class="fs-9xl wide-fs-8xl tablet-fs-7xl fw-600 mb-2r">Jupiter<span
class="text-accent">UI</span></h1>
</div>
<div class="delay-200" data-animate="v-fade-in-up">
<p class="fs-2xl text-dynamic-08 lh-1-7 mw-30r mb-2r">Versatile, friendly, simple: Jupiter
bridges the gaps that other CSS design systems don't.</p>
</div>
<div class="flex flex-row align-c delay-300 portrait-flex-c" data-animate="v-fade-in-up">
<a class="j-button sm mr-1-5r portrait-mr-0 portrait-mb-1r shadow-sm"
data-modal="introduction">Learn more <i class="j-icon sm"
data-icon="right_arrow"></i></a>
<a class="j-button give-border sm mr-1-5r portrait-mr-0 portrait-mb-1r"
href="https://codeberg.org/JupiterUI/JupiterUI" target="_blank" rel="noreferrer">View on
Codeberg</a>
</div>
<div class="flex flex-row align-c mt-1-5r delay-400 portrait-flex-c fs-sm text-dynamic-06"
data-animate="v-fade-in-up">
<span>License: MIT</span>
<p class="mb-0 mh-0-5r">|</p>
<span>Version: 4.3.0</span>
</div>
</div>
</div>
</section>
<section class="section" id="About">
<div class="container flex-c">
<div class="mw-50r flex-c vivus-sm">
<div class="delay-200" data-animate="v-fade-in-up">
<h3>Jupiter<span class="text-accent">UI</span> is a <span
class="text-accent">comprehensive</span> compilation of CSS rules that make-up an
entire <span class="text-accent">atomic design</span> system.</h3>
<h4 class="text-dynamic-07 fw-400 mb-2r">Jupiter is essentially a CSS design system. It
provides an extensive list of classes that make designing and developing for the
front-end hassle-free. It's a plug-and-play toolkit for modern front-end development.
</h4>
<h4 class="text-dynamic-07 fw-400 mb-2r">It sets itself apart by having built-in components
by default. Things like modals, cards, and so on are effortless to implement.</h4>
<a href="#Components" class="j-link underline lg d-inline mt-6r">View the components</a>
</div>
</div>
</div>
</section>
<section class="section g-accent-60-80 py-8r" id="Features">
<div class="container flex-c">
<div class="w-100p grid grid-2 wide-grid-1">
<div class="grid-block mt-3r">
<div class="mw-35r duration-600">
<span class="text-white-06 fw-600 fs-lg ls-md">Features</span>
<h2 class="text-white fs-5xl fw-600 mt-2r">Versatile—a design system for any platform.
</h2>
<p class="text-white-08 fs-xl lh-1-7 mw-30r my-2r">Jupiter is written with plain CSS and
JavaScript. Although the JavaScript is required for certain components, you can use
the CSS in any web project. If you're using React, there's the <a
href="https://codeberg.org/JupiterUI/JupiterUI-Components" target="_blank"
rel="noreferrer" class="j-link text-white fw-800">JupiterUI React Components</a>
library to help.</p>
<a class="j-button backdrop-blur-5 sm radius-90 mr-1-5r portrait-mr-0 portrait-mb-1r"
href="https://codeberg.org/JupiterUI/JupiterUI" target="_blank" rel="noreferrer">
<span class="text-accent">View repository</span>
<i class="j-icon sm text-accent" data-icon="right_arrow"></i>
</a>
</div>
</div>
<div class="grid-block mt-3r duration-600">
<div class="w-100p grid grid-2 wide-grid-2 tablet-grid-1">
<div class="grid-block">
<div class="j-card backdrop-blur-5 w-100p no-clarify">
<div class="j-card-content text-dynamic">
<i class="j-icon md mb-1r text-accent" data-icon="panels_2"></i>
<h4>Responsive interface</h4>
<p>JupiterUI is lightweight, minimal, and responsive. It makes your site
feel alive. It features a consistent, performant interface with lots of
customization options.</p>
</div>
</div>
</div>
<div class="grid-block align-e">
<div class="j-card backdrop-blur-5 no-clarify">
<div class="j-card-content text-dynamic">
<i class="j-icon md mb-1r text-accent" data-icon="panels"></i>
<h4>Easy to use, easy to extend</h4>
<p>Jupiter is a mere two files, the CSS file and the JavaScript file. While
it's easy to implement, it's also easy to modify to your standards,
compiling with basic SCSS.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="Components">
<div class="container lg text-c" data-animate="v-fade-in-up">
<h2 class="fs-7xl tablet-fs-5xl">Jupiter's <span class="text-accent">Components</span></h2>
</div>
</section>
<div class="w-100p">
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Accordion"
data-anchor="true">
<div class="container flex-c">
<div class="mw-25r w-100p">
<div>
<div class="w-100p mb-1r flex-sb">
<h2 class="mb-0">Accordion</h2>
</div>
<p>A highly flexible way to compress content. Accordions are so flexible, in fact,
that they can be included in the sidebar! See the commented line in
<code>index.html</code>
</p>
</div>
<div>
<p class="text-dynamic-07 fs-xs">Example:</p>
<div class="j-accordion w-100p" aria-expanded="false">
<div class="j-acc-trigger">
<div class="flex flex-row w-100p justify-sb align-c">
<h3 class="mb-0 fs-lg fw-600">How are you liking Jupiter?</h3>
<i class="j-icon" data-icon="down_chevron"></i>
</div>
</div>
<div class="j-acc-content">
<div class="p-1r">
<p class="mb-0">Nice!</p>
</div>
</div>
</div>
</div>
<div class="mt-3r">
<p class="text-dynamic-07 fs-xs mw-100 landscape-mw-none">They hold their own state!
</p>
<div class="j-accordion w-100p" aria-expanded="false">
<div class="j-acc-trigger">
<div class="flex flex-row w-100p justify-sb align-c">
<h3 class="mb-0 fs-lg fw-600">Accordion 2</h3>
<i class="j-icon" data-icon="down_chevron"></i>
</div>
</div>
<div class="j-acc-content">
<div class="p-1r">
<p class="mb-0">This is some text inside an accordion.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Avatar" data-anchor="true">
<div class="container flex-c">
<div class="mw-25r w-100p">
<div class="mb-2r">
<div class="w-100p mb-0-5r flex-sb">
<h2 class="mb-0">Avatar</h2>
</div>
<p>A pre-defined box for avatars. You can customize the size using Jupiter's
<code>[sm, md, lg]</code> directive.
</p>
</div>
<div class="w-100p mt-1r">
<p class="text-dynamic-07 fs-xs">Example:</p>
<div class="flex flex-row flex-wrap justify-s w-100p">
<div class="j-avatar xs mr-1r g-accent-60-80">
</div>
<div class="j-avatar sm mr-1r g-accent-60-80">
</div>
<div class="j-avatar md mr-1r g-accent-60-80">
</div>
<div class="j-avatar lg mr-1r g-accent-60-80">
</div>
<div class="j-avatar xl shadow-md mr-1r g-accent-60-80"></div>
<div class="j-avatar xl square shadow-md g-accent-60-80"></div>
</div>
</div>
</div>
</div>
</section>
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Button" data-anchor="true">
<div class="container flex-c">
<div class="mw-25r w-100p">
<div>
<div class="w-100p mb-1r flex-sb">
<h2 class="mb-0">Button</h2>
</div>
</div>
<div class="mb-3r">
<p class="text-dynamic-07 fs-xs">Example:</p>
<div class="flex w-100p flex-row flex-wrap justify-s">
<a class="j-button mb-1r mr-1r">Normal</a>
<a class="j-button gray mr-1r mb-1r">.gray</a>
<a class="j-button minimal mr-1r mb-1r">.minimal</a>
<a class="j-button ghost">.ghost</a>
</div>
</div>
<div class="mb-3r">
<p class="text-dynamic-07 fs-xs">Morph Example:</p>
<div class="flex w-100p flex-row flex-wrap justify-s">
<a class="j-button morph mb-1r mr-1r">Morph</a>
<a class="j-button morph hide-before mb-1r">Morph alt</a>
</div>
</div>
<div class="mb-3r">
<p class="text-dynamic-07 fs-xs">Ghost Button:</p>
<div class="flex w-100p flex-row flex-wrap justify-s">
<a class="ghost-button mb-1r mr-1r">Ghost Button</a>
</div>
</div>
<div class="mb-3r">
<p class="text-dynamic-07 fs-xs">Colored:</p>
<div class="flex w-100p flex-row flex-wrap justify-s">
<a class="j-button mb-1r mr-1r magenta">.magenta</a>
<a class="j-button mb-1r mr-1r purple">.purple</a>
<a class="j-button mb-1r mr-1r blue">.blue</a>
</div>
</div>
</div>
</div>
</section>
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Card" data-anchor="true">
<div class="container flex-c">
<div class="mw-25r w-100p">
<div>
<div class="w-100p mb-1r flex-sb">
<h2 class="mb-0">Card</h2>
</div>
<p>See the rest on the <code>html/cards.html</code> page.</p>
</div>
<div class="j-card">
<div class="j-card-image g-accent-60-80"></div>
<div class="j-card-content">
<h4>This is a card title.</h4>
<p>This is some card content that can be expanded.</p>
</div>
</div>
</div>
</div>
</section>
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Dropdown"
data-anchor="true">
<div class="container flex-c">
<div class="mw-25r w-100p">
<div>
<div class="w-100p mb-1r flex-sb">
<h2 class="mb-0">Dropdown</h2>
</div>
<p>Also known as "overflow menus." You can see the different structures in the
<code>index.html</code> file.
</p>
</div>
<div>
<p class="text-dynamic-07 fs-xs">Example:</p>
<div class="flex flex-row flex-wrap justify-s align-c">
<div class="j-dropdown mr-1r portrait-mb-2r portrait-mr-0" aria-expanded="false">
<a class="j-dropdown-trigger shallow-link">
<div class="j-avatar md g-accent-60-80"></div>
</a>
<ul class="j-dropdown-menu slide-down with-indicator shadow-md">
<li>
<a class="j-dropdown-link">Profile</a>
</li>
<li>
<a class="j-dropdown-link">Billing</a>
</li>
<li>
<a class="j-dropdown-link">Preferences</a>
</li>
<li class="j-dropdown-divider"></li>
<li>
<a class="j-dropdown-link">Switch account</a>
</li>
<li>
<a class="j-dropdown-link text-red-50">Logout</a>
</li>
</ul>
</div>
<div class="j-dropdown relative-right" aria-expanded="false">
<a class="j-button gray app icon-only j-dropdown-trigger"><i class="j-icon"
data-icon="dots_horizontal"></i></a>
<ul class="j-dropdown-menu scale-in">
<li>
<a class="j-dropdown-link">Link</a>
</li>
<li>
<a class="j-dropdown-link">Link</a>
</li>
<li>
<a class="j-dropdown-link">Link</a>
</li>
<li>
<a class="j-dropdown-link">Menu item</a>
</li>
</ul>
</div>
<div class="j-dropdown relative-right ml-1r" aria-expanded="false">
<a class="j-button gray app icon-only j-dropdown-trigger"><i class="j-icon"
data-icon="dots_horizontal"></i></a>
<ul class="j-dropdown-menu slide-up icons-only shadow-md">
<li>
<a class="j-dropdown-link"><i class="j-icon"
data-icon="dots_horizontal"></i></a>
</li>
<li>
<a class="j-dropdown-link"><i class="j-icon"
data-icon="dots_horizontal"></i></a>
</li>
<li>
<a class="j-dropdown-link"><i class="j-icon"
data-icon="dots_horizontal"></i></a>
</li>
<li>
<a class="j-dropdown-link"><i class="j-icon"
data-icon="dots_horizontal"></i></a>
</li>
</ul>
</div>
<div class="j-dropdown items-bordered relative-right ml-1r" aria-expanded="false">
<a class="j-button no-push gray app icon-only j-dropdown-trigger"><i
class="j-icon" data-icon="dots_horizontal"></i></a>
<ul class="j-dropdown-menu slide-down icons-only vertical shadow-md">
<li>
<a class="j-dropdown-link"><i class="j-icon"
data-icon="dots_horizontal"></i></a>
</li>
<li>
<a class="j-dropdown-link"><i class="j-icon"
data-icon="dots_horizontal"></i></a>
</li>
<li>
<a class="j-dropdown-link"><i class="j-icon"
data-icon="dots_horizontal"></i></a>
</li>
<li>
<a class="j-dropdown-link"><i class="j-icon"
data-icon="dots_horizontal"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Form" data-anchor="true">
<div class="container flex-c">
<div class="mw-25r w-100p">
<div>
<div class="w-100p mb-1r flex-sb">
<h2 class="mb-0">Form</h2>
</div>
</div>
<div>
<p class="text-dynamic-07 fs-xs">Example:</p>
<div class="flex-c">
<form>
<label for="default" class="j-label">Default input</label>
<input type="text" class="j-input" placeholder="Input" name="default"
title="Default input" />
<label for="default" class="j-label">Thin input</label>
<input type="text" class="j-input thin shadow-xs" placeholder="Input"
name="default" title="Default input" />
<label for="icon-input" class="j-label">Icon input</label>
<div class="j-input-container">
<input type="text" class="j-input" data-icon="" name="icon-input"
title="Icon input"></input>
<i class="j-icon" data-icon="search"></i>
</div>
<label for="yinyang" class="j-label">yinyang input</label>
<div class="j-input-container">
<input type="text" class="j-input yinyang" placeholder=".yinyang"
name="yinyang" title="yinyang input" data-icon=""></input>
<i class="j-icon" data-icon="search"></i>
</div>
<label for="textarea" class="j-label">textarea</label>
<textarea class="j-input" placeholder="Textarea" name="textarea"
title="Textarea"></textarea>
<label class="j-checkbox-container">Checkbox
<input type="checkbox" checked="checked" />
<span class="j-checkmark"></span>
</label>
<label class="j-radio-container">Radio
<input type="radio" />
<span class="j-radio"></span>
</label>
<label class="j-radio-container">Radio 1
<input type="radio" />
<span class="j-radio"></span>
</label>
<div class="flex flex-row align-c">
<label class="j-switch">
<input type="checkbox" checked />
<span class="j-slider"></span>
</label>
<p class="mb-0 text-dynamic-06 ml-0-5r">I'm a label</p>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Icons" data-anchor="true">
<div class="container flex-c">
<div class="mw-25r w-100p">
<div>
<div class="w-100p mb-1r flex-sb">
<h2 class="mb-0">Icons</h2>
</div>
<p><code>&lt;i data-icon="icon_name" class="j-icon"&gt;&lt;i&gt;</code></p>
<p>Uses the standard sizing convention.</p>
</div>
<div>
<p class="text-dynamic-07 fs-xs">Example:</p>
<div class="flex flex-row flex-wrap justify-s">
<i class="j-icon xs mr-1r" data-icon="search"></i>
<i class="j-icon sm mr-1r" data-icon="search"></i>
<i class="j-icon lg mr-1r" data-icon="search"></i>
<i class="j-icon xl mr-1r" data-icon="search"></i>
<i class="j-icon xxxl text-accent" data-icon="search"></i>
</div>
</div>
</div>
</div>
</section>
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Loading" data-anchor="true">
<div class="container flex-c">
<div class="mw-25r w-100p">
<div>
<div class="w-100p mb-1r flex-sb">
<h2 class="mb-0">Loader</h2>
</div>
</div>
<div>
<p class="text-dynamic-07 fs-xs">Example:</p>
<div class="flex flex-row flex-wrap justify-s">
<div class="j-loader sm mr-1r"></div>
<div class="j-loader md mr-1r"></div>
<div class="j-loader lg mr-1r"></div>
<div class="j-loader xl"></div>
</div>
</div>
</div>
</div>
</section>
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Link" data-anchor="true">
<div class="container flex-c">
<div class="mw-30r w-100p">
<div>
<div class="w-100p mb-1r flex-sb">
<h2 class="mb-0">Link</h2>
</div>
</div>
<div class="mb-2r">
<p class="text-dynamic-07 fs-xs">Basic links:</p>
<div class="flex flex-row flex-wrap justify-s">
<a class="j-link sm mr-1r">Link .sm</a>
<a class="j-link mr-1r">Link Primary</a>
<a class="j-link lg mr-1r">Link .lg</a>
</div>
</div>
<div class="mb-2r">
<p class="text-dynamic-07 fs-xs">Push link:</p>
<div class="flex flex-row flex-wrap justify-s">
<a class="j-link push">Link Primary</a>
</div>
</div>
<div class="mb-2r">
<p class="text-dynamic-07 fs-xs">Underline links:</p>
<div class="flex flex-row flex-wrap">
<a class="j-link underline mr-2r no-bg">Link Underline</a>
<a class="j-link underline mr-2r thin">Link Underline</a>
<a class="j-link underline mr-2r">Link Underline</a>
<a class="j-link underline md mr-2r">Link Underline</a>
<a class="j-link underline lg">Link Underline</a>
</div>
</div>
<div class="mb-2r">
<p class="text-dynamic-07 fs-xs">Underline alt:</p>
<div class="flex flex-row flex-wrap">
<a class="j-link underline mr-2r alt">Link Underline</a>
</div>
</div>
<div>
<p class="text-dynamic-07 fs-xs">Cover links:</p>
<div class="flex flex-row flex-wrap justify-s">
<a class="j-link cover mr-2r"><span>Link Cover</span></a>
<a class="j-link cover accent"><span>Link Cover</span></a>
</div>
</div>
</div>
</div>
</section>
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Modal" data-anchor="true">
<div class="container flex-c">
<div class="mw-25r w-100p">
<div>
<div class="w-100p mb-1r flex-sb">
<h2 class="mb-0">Modal</h2>
</div>
</div>
<div>
<p class="text-dynamic-07 fs-xs">Example:</p>
<a class="j-button" data-modal="introduction">Launch Modal 1</a>
<a class="j-button my-1r" data-modal="demo2">Launch Modal 2</a>
</div>
</div>
</div>
</section>
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Notifications"
data-anchor="true">
<div class="container flex-c">
<div class="mw-25r w-100p">
<div>
<div class="w-100p mb-1r flex-sb">
<h2 class="mb-0">Notifications</h2>
</div>
</div>
<div>
<p class="text-dynamic-07 fs-xs">Example:</p>
<a class="j-button" data-notify='{"title":"This is a notification"}'>Launch
Notification</a>
</div>
</div>
</div>
</section>
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Skeleton"
data-anchor="true">
<div class="container flex-c">
<div class="mw-25r w-100p">
<div>
<div class="w-100p mb-1r flex-sb">
<h2 class="mb-0">Skeleton</h2>
</div>
</div>
<div class="mb-3r">
<p class="text-dynamic-07 fs-xs">Example:</p>
<div class="skeleton w-100p"></div>
<div class="skeleton w-90p my-1r"></div>
<div class="skeleton w-80p"></div>
</div>
<div>
<p class="text-dynamic-07 fs-xs">Card example:</p>
<div class="j-card w-100p">
<div class="j-card-image g-deep-blue-2"></div>
<div class="j-card-content">
<div class="skeleton w-100p mb-0-5r"></div>
<div class="skeleton w-90p p-8 mb-0-5r"></div>
<div class="skeleton w-80p p-8"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Tabs" data-anchor="true">
<div class="container flex-c">
<div class="mw-25r w-100p">
<div>
<div class="w-100p mb-1r flex-sb">
<h2 class="mb-0">Tabs</h2>
</div>
</div>
<div class="mb-3r">
<p class="text-dynamic-07 fs-xs">Example:</p>
<div class="j-tab-container w-100p flex align-s" data-active-tab="1">
<div class="j-tab-links z-9999">
<a class="j-tab-link" data-tab-for="1"><i class="j-icon mr-0-5r"
data-icon="search"></i> Search</a>
<a class="j-tab-link" data-tab-for="2"><i class="j-icon mr-0-5r"
data-icon="hashtag"></i> Hashtag</a>
<a class="j-tab-link" data-tab-for="3"><i class="j-icon mr-0-5r"
data-icon="avatar"></i> Avatar</a>
</div>
<div class="j-tabs mt-2r flex align-s">
<div class="j-tab h-6r bg-blue-10" data-tab="1">
<div>
<p class="text-black">I'm tab one!</p>
</div>
</div>
<div class="j-tab h-6r bg-purple-10" data-tab="2">
<p class="text-black">I'm tab two!</p>
</div>
<div class="j-tab h-6r bg-purple-10" data-tab="3">
<div data-animate="scale-in-sm">
<p class="text-black">I'm tab three!</p>
</div>
</div>
</div>
</div>
</div>
<div>
<p class="text-dynamic-07 fs-xs">With <code>.round</code>:</p>
<div class="j-tab-container mt-3r w-100p flex align-s" data-active-tab="2">
<div class="j-tab-links active-accent round grid grid-3 gap-0 radius-90">
<div class="grid block flex-c">
<a class="j-tab-link w-100p" data-tab-for="1"><i class="j-icon mr-0-5r"
data-icon="search"></i> Search</a>
</div>
<div class="grid block flex-c">
<a class="j-tab-link w-100p" data-tab-for="2"><i class="j-icon mr-0-5r"
data-icon="hashtag"></i> Hashtag</a>
</div>
<div class="grid block flex-c">
<a class="j-tab-link w-100p" data-tab-for="3"><i class="j-icon mr-0-5r"
data-icon="avatar"></i> Avatar</a>
</div>
</div>
<div class="j-tabs mt-2r flex align-s">
<div class="j-tab h-6r bg-blue-10" data-tab="1">
<p class="text-black">I'm tab one!</p>
</div>
<div class="j-tab h-6r bg-purple-10" data-tab="2">
<p class="text-black">I'm tab two!</p>
</div>
<div class="j-tab h-6r bg-green-10" data-tab="3">
<p class="text-black">I'm tab three!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Tags" data-anchor="true">
<div class="container flex-c">
<div class="mw-25r w-100p">
<div>
<div class="w-100p mb-1r flex-sb">
<h2 class="mb-0">Tags</h2>
</div>
</div>
<div>
<p class="text-dynamic-07 fs-xs">Example:</p>
<div>
<div class="j-tag"><span>Tag Primary</span></div>
<div class="j-tag red"><span>red</span></div>
<div class="j-tag orange"><span>orange</span></div>
<div class="j-tag magenta"><span>magenta</span></div>
<div class="j-tag purple"><span>purple</span></div>
<div class="j-tag blue"><span>blue</span></div>
<div class="j-tag cyan"><span>cyan</span></div>
<div class="j-tag teal"><span>teal</span></div>
<div class="j-tag green"><span>green</span></div>
<div class="j-tag cool-gray"><span>cool-gray</span></div>
<div class="j-tag gray"><span>gray</span></div>
<div class="j-tag warm-gray"><span>warm-gray</span></div>
<div class="j-tag rounded"><span>Tag .rounded</span></div>
</div>
</div>
</div>
</div>
</section>
<section class="section flex-c border-top-ui-2 dark-border-color-black" id="Tags" data-anchor="true">
<div class="container flex-c">
<div class="mw-25r w-100p">
<div>
<div class="w-100p mb-1r">
<h2 class="mb-0">Tile</h2>
<p>The Tile is essentially just a customizeable wrapper for content.</p>
</div>
</div>
<div>
<p class="text-dynamic-07 fs-xs">Example:</p>
<div>
<div class="j-tile mb-1r">
<p class="mb-0 text-dynamic-07"><span
class="fw-600 text-dynamic">Default.</span></p>
</div>
<div class="j-tile mb-1r darker">
<p class="mb-0 text-dynamic-07"><span class="fw-600 text-dynamic">Darker.</span>
</p>
</div>
<div class="j-tile mb-1r clickable">
<p class="mb-0 text-dynamic-07"><span
class="fw-600 text-dynamic">Clickable.</span></p>
</div>
<div class="mt-3r"></div>
<p>Selectable tiles are very versatile. View the Changelog to see what classes are
available.</p>
<div class="j-tile mb-1r selectable">
<h4 class="mb-0">Selectable tiles.</h4>
<p class="mb-0 text-dynamic-07">Jupiter v3.8.0 introduced JavaScript support for
selectable tiles. Start clicking around to give them a try!</p>
</div>
<div class="j-tile mb-1r selectable accent">
<p class="mb-0 text-dynamic-07"><span class="fw-600 text-dynamic">Selectable
<span class="text-accent">accent</span></span></p>
</div>
<div class="j-tile mb-1r selectable magenta">
<p class="mb-0 text-dynamic-07"><span
class="text-magenta-60 fw-500">Magenta</span></p>
</div>
<div class="j-tile mb-1r selectable purple">
<p class="mb-0 text-dynamic-07"><span
class="text-purple-60 fw-500">Purple</span></p>
</div>
<div class="j-tile mb-1r selectable cyan">
<p class="mb-0 text-dynamic-07"><span class="text-cyan-60 fw-500">Cyan</span>
</p>
</div>
<div class="mt-3r"></div>
<p>Selectable Tiles inside of <code>.j-tiles</code> behave like radio buttons.</p>
<div class="j-tiles is-noticeable">
<div class="j-tile mb-1r selectable">
<p class="mb-0 text-dynamic-07"><span
class="fw-600 text-dynamic">Selectable.</span> You may only choose
one!</p>
</div>
<div class="j-tile mb-1r selectable">
<p class="mb-0 text-dynamic-07"><span
class="fw-600 text-dynamic">Selectable.</span> You may only choose
one!</p>
</div>
<div class="j-tile mb-1r selectable">
<p class="mb-0 text-dynamic-07"><span
class="fw-600 text-dynamic">Selectable.</span> You may only choose
one!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<section class="section g-accent-60-80 py-8r" id="Features">
<div class="container flex-c duration-600">
<div class="mw-40r flex-c text-c">
<h2
class="text-white fs-9xl wide-fs-8xl tablet-fs-7xl landscape-fs-6xl portrait-fs-5xl fw-600 mt-2r">
JupiterUI</h2>
<a class="j-button backdrop-blur-5 radius-90 mt-3r"
href="https://codeberg.org/JupiterUI/JupiterUI" target="_blank" rel="noreferrer">
<span class="text-accent">View repository</span>
<i class="j-icon sm text-accent" data-icon="right_arrow"></i>
</a>
</div>
</div>
</section>
</div>
</div>
<script defer src="dist/jupiterui.js"></script>
<script defer src="extensions/tfn/tfn.js"></script>
</body>
</html>