Home Home

Noctia Components

Text

Fixed <p>

.noctia-fixed-text

Selector
p.noctia-fixed-text
Usage
<p class="noctia-fixed-text">Noctia</p>
Base Text Color
:root {
    --noctia-text-color: #252525;
}
Base Text Font
:root {
    --noctia-text-font: var(--noctia-sans, sans-serif);
}
Utility

Batch Apply

Selector
.noctia-fixed-text p
Usage
<div class="noctia-fixed-text">
  <p>Noctia</p>
  <p>Noctia</p>
  <p>Noctia</p>
</div>

Fixed Text Group

Selector
.noctia-fixed-text-group p
Usage
<div class="noctia-fixed-text-group">
  <p>Noctia</p>
  <p>Noctia</p>
  <p>Noctia</p>
</div>

Fixed List

  • Noctia
  • Noctia
  • Noctia
  1. Noctia
  2. Noctia
  3. Noctia
Selector
ul.noctia-fixed-list,
ol.noctia-fixed-list
Usage
<ul class="noctia-fixed-list">
  <li>Noctia</li>
  <li>Noctia</li>
  <li>Noctia</li>
</ul>

<ol class="noctia-fixed-list">
  <li>Noctia</li>
  <li>Noctia</li>
  <li>Noctia</li>
</ol>
Base Text Color
:root {
    --noctia-text-color: #252525;
}
Base Text Font
:root {
    --noctia-text-font: var(--noctia-sans, sans-serif);
}
Utility

Title

Selector
.noctia-title-1
.noctia-title-2
.noctia-title-3
.noctia-title-4
.noctia-title-5
.noctia-title-6
Usage
<h1 class="noctia-title-1">Noctia</h1>
Base Text Color
:root {
    --noctia-title-color: var(--noctia-dark, #252525);
}
Base Font
:root {
    --noctia-title-font: var(--noctia-sans, sans-serif);
}
Base Border Color
:root {
    --noctia-title-border-color: var(--noctia-black, #000);
}
Utility

Fixed Table

Title Title Title
Noctia Noctia Noctia
Selector
table.noctia-fixed-table
Usage
<table class="noctia-fixed-table">
  <tr>
    <th>Title</th>
    <th>Title</th>
  </tr>
  <tr>
    <td>Noctia</td>
    <td>Noctia</td>
  </tr>
</table>
Base <th> Text Color
:root {
    --noctia-table-th-text-color: #252525;
}
Base <td> Text Color
:root {
    --noctia-table-td-text-color: #252525;
}
Base <th> Background Color
:root {
    --noctia-table-th-color: #EEEEEE;
}
Base <td> Background Color
:root {
    --noctia-table-td-color: #FFFFFF;
}
Base Text Font
:root {
    --noctia-table-font: var(--noctia-sans, sans-serif);
}
Base Table Border Color
:root {
    --noctia-table-border-color: #C0C0C0;
}
Utility

Fixed <details>

Open
Selector
details.noctia-fixed-details
Usage
<details class="noctia-fixed-details">
  <summary>Open</summary>
  <div class="noctia-fixed-details-content">
    <p>Noctia</p>
  </div>
</details>
Base Details Color
:root {
    --noctia-ds-color: #252525;
}
Base Open Text Color
:root {
    --noctia-ds-open-text-color: #FFFFFF;
}
Base Closed Text Color
:root {
    --noctia-ds-closed-text-color: #252525;
}
Base Closed Background Color
:root {
    --noctia-ds-closed-bg-color: #EEEEEE;
}
Base Content Background Color
:root {
    --noctia-ds-content-bg-color: #FFFFFF;
}
Utility

Form

Fixed Form

Selector
form.noctia-fixed-form
Usage
<form class="noctia-fixed-form">

</form>
Base Background Color
:root {
    --noctia-form-bg-color: #FFFFFF;
}
Utility

Field

<form class="noctia-fixed-form">
  <fieldset class="noctia-fixed-form-field">

  </fieldset>
</form>

Label

Selector
form.noctia-fixed-form label,
label.noctia-fixed-label
Usage
<form class="noctia-fixed-form">
  <label>Noctia</label>
</form>

<label class="noctia-fixed-label">Noctia</label>
Base Text Color
:root {
    --noctia-label-color: #252525;
}
Base Text Font
:root {
    --noctia-label-font: var(--noctia-sans, sans-serif);
}
Utility

Fixed Input（Block）

Selector
form.noctia-fixed-form textarea,
form.noctia-fixed-form input[type="x"],
textarea.noctia-fixed-textarea,
input[type="x"].noctia-fixed-input
Usage
<form class="noctia-fixed-form">
  <input type="text">
  <textarea placeholder="Noctia"></textarea>
</form>

<textarea class="noctia-fixed-textarea"></textarea>

<input type="text" class="noctia-fixed-input">
Base Text Color
:root {
    --noctia-input-text-color: #252525;
}
Base Background Color
:root {
    --noctia-input-bg-color: #FFFFFF;
}
Base Text Font
:root {
    --noctia-input-font: var(--noctia-sans, sans-serif);
}
Base Border Color
:root {
    --noctia-neutral-color: #E5E7EB;
}
Base Placeholder Color
:root {
    --noctia-input-placeholder-color: #AAAAAA;
}
Utility

Fixed Input（Inline）

Selector
form.noctia-fixed-form input[type="x"],
form.noctia-fixed-form select,
input[type="x"].noctia-fixed-input,
select.noctia-fixed-select
Usage
<form class="noctia-fixed-form">
  <input type="date">
  <select></select>
</form>

<input type="date" class="noctia-fixed-input">

<select class="noctia-fixed-select"></select>
Base Text Color
:root {
    --noctia-input-text-color: #252525;
}
Base Background Color
:root {
    --noctia-input-bg-color: #FFFFFF;
}
Base Text Font
:root {
    --noctia-input-font: var(--noctia-sans, sans-serif);
}
Base Border Color
:root {
    --noctia-neutral-color: #E5E7EB;
}
Utility

Radio and Checkbox

Selector
form.noctia-fixed-form input[type="x"],
input[type="x"].noctia-fixed-input
Usage
<form class="noctia-fixed-form">
  <input type="checkbox">
</form>

<input type="checkbox" class="noctia-fixed-input">

Submit Button and Reset Button

Selector
form.noctia-fixed-form [type="x"],
[type="submit"].noctia-fixed-submit,
[type="reset"].noctia-fixed-reset
Usage
<form class="noctia-fixed-form">
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

<button type="submit" class="noctia-fixed-submit">Submit</button>

<button type="reset" class="noctia-fixed-submit">Reset</button>
Base Text Color
:root {
    --noctia-form-btn-text-color: #252525;
}
Base Background Color
:root {
    --noctia-form-btn-bg-color: #FFFFFF;
}
Base Active Background Color
:root {
    --noctia-form-btn-active-bg-color: #EEEEEE;
}
Base Text Font
:root {
    --noctia-form-btn-font: var(--noctia-sans, sans-serif);
}
Utility

Hamburger Menu

Noctia

Open Button and Close Button

Selector
button.noctia-burgermenu-btn
Usage
<button class="noctia-burgermenu-btn"></button>
Base Button Line Color
:root {
    --noctia-burgermenu-btn-color: #252525;
}
Change Line Color
<button class="noctia-burgermenu-btn clr-red"></button>
Text Color
Change Size
<button class="noctia-burgermenu-btn h-40px"></button>
Size（Height）

Can’t resize with width

Menu

Selector
button.noctia-burgermenu-btn + .noctia-burgermenu
Usage
<button class="noctia-burgermenu-btn"></button>
<div class="noctia-burgermenu">
  <button class="noctia-burgermenu-close-btn"></button>
</div>

Add a menu after the Open button

Can’t open without a Close button

Base Background Color
:root {
    --noctia-burgermenu-bg-color: #FFFFFF;
}
Option
  • .noctia-burgermenu.menu-top
  • .noctia-burgermenu.menu-right
  • .noctia-burgermenu.menu-bottom
  • .noctia-burgermenu.menu-left
Utility

Card

Basic Navigation

Selector
nav.noctia-card-container
Usage
<nav class="noctia-card-container">
  <ul>
    <li><a href="">Noctia</a></li>
    <li><a href=""><img src="" alt="">Noctia</a></li>
  </ul>
</nav>
Base Background Color
:root {
    --noctia-card-bg-color: #FFFFFF;
}
Base Link Text Color
:root {
    --noctia-card-text-color: #252525;
}
Base Link Background Color
:root {
    --noctia-card-link-bg-color: #FAFAFA;
}
Base Link Active Background Color
:root {
    --noctia-card-link-active-bg-color: #DDDDDD;
}
Base Link Text Font
:root {
    --noctia-card-font: var(--noctia-sans, sans-serif);
}
Utility

Card with Title

Noctia

Selector
.noctia-card .noctia-card-title
Usage
<div class="noctia-card">
  <h3 class="noctia-card-title">Noctia</h3>
  <nav class="noctia-card-container">
    <ul>
      <li><a href="#">Noctia</a></li>
      <li><a href="#"><img src="" alt="">Noctia</a></li>
    </ul>
  </nav>
</div>
Base Title Text Color
:root {
    --noctia-card-text-color: #252525;
}
Base Title Text Font
:root {
    --noctia-card-font: var(--noctia-sans, sans-serif);
}
Utility

Multi-Section Card

Noctia

Noctia

Selector
.noctia-card section
Usage
<div class="noctia-card">
  <section>
    <h3 class="noctia-card-title">Noctia</h3>
    <nav class="noctia-card-container">
      <ul>
        <li><a href="">Noctia</a></li>
        <li><a href=""><img src="" alt="">Noctia</a></li>
      </ul>
    </nav>
  </section>
  <section>
    <h3 class="noctia-card-title">Noctia</h3>
    <nav class="noctia-card-container">
      <ul>
        <li><a href="">Noctia</a></li>
        <li><a href=""><img src="" alt="">Noctia</a></li>
      </ul>
    </nav>
  </section>
</div>

Copy Text

Copy Text Content
<span data-copy>Noctia</span>
Copy Attribute Value
<span data-copy="Hallo!">Noctia</span>

Code Block

Basic Code Block

console.log("Noctia");
alert("Click me");
Selector
.noctia-code-container
Usage
<div class="noctia-code-container">
  <pre><code> </code></pre>
</div>
Base Background Color
:root {
    --noctia-cb-bg-color
}
Base Code Text Color
:root {
    --noctia-cb-code-text-color: #00BCD4;
}
Base Code Text Font
:root {
    --noctia-cb-code-font: var(--noctia-mono, monospace);
}
Base Code Selection Text Color
:root {
    --noctia-cb-code-selection-text-color: #252525;
}
Base Code Selection Background Color
:root {
    --noctia-cb-code-selection-bg-color: #EEEEEE;
}
Base Code Copy Text Color
:root {
    --noctia-cb-code-copy-text-color: #8BC34A;
}
Base Code Copy Active Background Color
:root {
    --noctia-cb-active-color: #808080;
}
Base Code Copy Hover Background Color
:root {
    --noctia-cb-hover-color: #555555;
}
Utility

Code Block with Title or Copy Button

Noctia 
console.log("Noctia");
alert("Click me");
Selector（Title and Copy Button）
figure.noctia-code-block > figcaption.noctia-code-header .noctia-code-title,
figure.noctia-code-block > figcaption.noctia-code-header button[data-copy-block]
Usage
<figure class="noctia-code-block">
  <figcaption class="noctia-code-header">
    <span class="noctia-code-title">Noctia</span>
    <button data-copy-block></button>
  </figcaption>
  <div class="noctia-code-container">
    <pre><code> </code></pre>
  </div>
</figure>
Base Background Color
:root {
    --noctia-cb-bg-color
}
Base Title and Copy Button Text Color
:root {
    --noctia-cb-header-text-color: #FFFFFF;
}
Base Title and Copy Button Text Font
:root {
    --noctia-cb-header-font: var(--noctia-sans, sans-serif);
}
Base Copy Button Active Color
:root {
    --noctia-cb-active-color: #808080;
}
Base Copy Button Hover Color
:root {
    --noctia-cb-hover-color: #555555;
}
Utility

Code Description

Noctia
Noctia
Noctia
Noctia
Selector
dl.noctia-code-description
Usage
<dl class="noctia-code-description">
  <dt>Noctia</dt>
  <dd>Noctia</dd>
</dl>
Base Background Color
:root {
    --noctia-cd-bg-color: #FFFFFF;
}
Base Border Color
:root {
    --noctia-cd-border-color: #C0C0C0;
}
Base <dt> Text Color
:root {
    --noctia-cd-dt-text-color: #000000;
}
Base <dd> Text Color
:root {
    --noctia-cd-dd-text-color: #555555;
}
Base <dt> and <dd> Text Font
:root {
    --noctia-cd-font: var(--noctia-sans, sans-serif);
}
Base Separator Line Color
:root {
    --noctia-cd-separator-color: #E5E7EB;
}
Utility

Scroll to Top Button

Selector
.noctia-scroll-top
Usage
<button class="noctia-scroll-top"></button>
Base Color
:root {
    --noctia-scroll-top-color: #000000;
}
Can change with "color: ;"
Base Active Color
:root {
    --noctia-scroll-top-active-color: #DDDDDD;
}
Base Hover Color
:root {
    --noctia-scroll-top-hover-color: #EEEEEE;
}
Utility

Toast Notification

Usage（JavaScript） 
Noctia.toast("Hello!");
Base Text Color
:root {
    --noctia-toast-text-color: #FFFFFF;
}
Base Background Color
:root {
    --noctia-toast-bg-color: rgba(0, 0, 0, 0.6);
}
Base Text Font
:root {
    --noctia-toast-font: var(--noctia-sans, sans-serif);
}

License

Lanlanwi

Selector
p.noctia-license
Usage
<p class="noctia-license">Your Name</p>
Base Text Color
:root {
    --noctia-text-color: #252525;
}
Base Text Font
:root {
    --noctia-text-font: var(--noctia-sans, sans-serif);
}
Utility