Components Sample
Documentation
General
Template
Layout
Typography
Navigational
Informational
Data
Input
Images
Header
Footer
NeonUI-Components-sample
Components Sample

Neon UI - Documentation Components Sample Index

Free Component Library Samples. Responsive by default. CSS3, Javascript, HTML5

Neon UI Components - Documentation

NeonUI Docs Links

The Documentation of How to use the NeonUI Components can be found using the followng link.

NeonUI Components - Documentation Link

Neon UI Components - Sample

NeonUI Samples

The following content on this page has the samples of all the UI Components as a quick reference.

Typography

Typography in context

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.

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

Link Text

link-text: Large Link text

Code

npm i webpack -g

Breadcrumb

NeonUI-Documentation Components Index

Strong text

This is an example for Strong Text

Emphasized text

This is an example for Emphasised 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

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
<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>
Copy

Code Box - Soft

code-box: https://www.w3webd.com/dist/css/neon-ui-v1.0-min.css
Copy
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);
    }
}
Copy

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);
    }
}

Accordion

Table - Thulasi

Tag Description Layout Meta Self-Closing
<!-- --> Comment
<!DOCTYPE> Document type
<a> Anchor hyperlink Inline

Table - Other Samples

  • Other Tables

    • Table - Default

      Tag Description Layout Meta Self-Closing
      <!-- --> Comment
      <!DOCTYPE> Document type
      <a> Anchor hyperlink Inline

      Table - Blue

      Tag Description Layout Meta Self-Closing
      <!-- --> Comment
      <!DOCTYPE> Document type
      <a> Anchor hyperlink Inline

      Table - Blue Striped

      Tag Description Layout Meta Self-Closing
      <!-- --> Comment
      <!DOCTYPE> Document type
      <a> Anchor hyperlink Inline

Button Feedback - Anchor, Span & Div

Yes No Yes No
Yes
No

Button Submit - Anchor, Span & Div

Submit Submit
Submit

Button Black Classic- Anchor, Span & Div

Contact Us
Contact Us
Contact Us

Button Black - Anchor, Span & Div

Download
Download
Download

Button Grey - Anchor, Span & Div

Download Download
Download

Button Grey Translucent - Anchor, Span & Div

Download Download
Download

Buttons - Other Samples

Menubar - Primary

Menubar Section Sample

Menubar - View in a seperate window tab

Output Sample

Image Frame

green mushroom image

Image Frame with title

green mushroom portrait image
A cluster of mushrooms in the forest

Carousel Images - With Animation

Image-Carousel-1
Image-Carousel-2
Image-Carousel-3
Image-Carousel-4

Carousel Images - Without Animation

Image-Carousel-1
Image-Carousel-2
Image-Carousel-3
Image-Carousel-4

Pagination - Prev and Next

Prev
Previous Topic
Next
Next Topic
Prev
Next
Documentation - Getting started