Components Index

Documentation

Layout

Components

Layout

Documentation Components

Neon UI - the Documentation Components Library

Free Component Library for Documentation. Responsive by default. CSS3, Javascript, HTML5

Introduction

Neon UI is a free forever, opensource, documentation web component library. Developers can create professional, full fledged documentation of their product, rapidly, with minimum code changes, using the ready to use documentation html-css-javascript.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur velit consequuntur consectetur molestias, laboriosam labore voluptates est, delectus quaerat minima cumque ad tenetur voluptatem placeat laborum pariatur voluptas nemo commodi. This is a text with anchor element inside paragraph.

To include a code npm -i g webpack inline with paragraph sentence. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur velit consequuntur consectetur molestias, laboriosam em emphasized word labore voluptates est, with strong word inline with the paragraph. Delectus quaerat minima cumque ad tenetur voluptatem placeat laborum pariatur voluptas nemo commodi.

Neon UI Css link

Include the following Neon UI Component Library css stylesheet file as a stylesheet link in your css or html files and you are ready to go.

Neon UI - Documentation components Library - CSS - Latest Download Link

Neon UI Javascript link

Include the following Neon UI Component Library javascript file as a module link in your html files for interactive Neon UI components in your projects.

Neon UI - Documentation components Library - Javascript - Latest Download Link

Neon UI Components - Sample

Typography

h5: Getting started

h1: Introduction to Webpack

subheading: Webpack Definition, installation and setting up of project environment

h2: What is Webpack

p: Webpack is a development tool to streamline code development process.

h3: Install Methods

p: starting the installation procedure

h4: Links:

p: starting the installation procedure

h5: See Also

p: starting the installation procedure

Other Components

References Heading

font-semibold: References:

Anchor

This is an anchor element

Code

npm i webpack -g

Breadcrumb

Strong text

This is an example for Strong Text

Emphasized text

This is an example for Emphasised Text

Info Box

info-box: This is a sample info-round about

info-box-plain: This is a sample info-round about

Tips Box

tips-box: This is a sample info-round about

tips-box-blue: This is a sample info-round about

tips-box-yellow: This is a sample info-round about

tips-box-red: This is a sample info-round about

Link Box

link-box: https://www.w3webd.com/dist/css/neon-ui-v1.0-min.css

Copy

Code Box - Soft

code-box: https://www.w3webd.com/dist/css/neon-ui-v1.0-min.css

Copy

Link Text

link-text: Large Link text

List Items

list-topics: Open the terminal
list-topics: Enter the following command.
list-topics: Close the terminal
list-topics: Close the system

list-topics: Open the terminal
list-topics: Enter the following command.
list-topics: Close the terminal
list-topics: Close the system

Code Block

HTML
CSS
Javascript
Copy

                  <div class="m-l-1">
<div class="code-box m-l-1">
<!-- <pre class="code-html"> -->
<code class="m-l-1">Javscript . This is a test code </code>
<!-- </pre> -->
</div>
</div>
                  .thulasi {
    font-family: "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Oxygen",
    "Ubuntu",
    "Cantarell",
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
}
                  async function copyToClipboard(clipboardText) {
    try {
        await navigator.clipboard.writeText(clipboardText);
        if (test) console.log("Copy to Clipboard Successful: ", clipboardText);
    } catch (error) {
        if (test) console.log("Copy to Clipboard Error ", error);
    }
}

                

HTML
CSS
Javascript
Copy

                  <div class="m-l-1">
<div class="code-box m-l-1">
<!-- <pre class="code-html"> -->
<code class="m-l-1">Javscript . This is a test code </code>
<!-- </pre> -->
</div>
</div>
                  .thulasi {
    font-family: "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Oxygen",
    "Ubuntu",
    "Cantarell",
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
}
                  async function copyToClipboard(clipboardText) {
    try {
        await navigator.clipboard.writeText(clipboardText);
        if (test) console.log("Copy to Clipboard Successful: ", clipboardText);
    } catch (error) {
        if (test) console.log("Copy to Clipboard Error ", error);
    }
}
                