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 anchorelement inside paragraph.
To include a code npm -i g webpackinline with paragraph sentence. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur velit consequuntur consectetur molestias, laboriosam em emphasized wordlabore voluptates est, with strong wordinline 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 Librarycss stylesheetfile 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 Libraryjavascriptfile 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:
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.cssLink 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 Box
Javscript . This is a test code Code Block
<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);}}<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);}}Accordion
Image Frame
Image Frame with title
Feedback buttons
Yes NoPagination - Prev and Next
nav-pagination-prev-next-container
nav-pagination-prev
nav-pagination-next