To use Native UI to your projects, copy the given link below and paste it in the head tag of your html, above all other style sheets. And voila! Done.
Go ahead with the documentaion once you are ready with your stylesheet. To know about the styled components, their variations, read the documentaion
You can use both dark and light themes according to your need.
Alerts are used to provide contexual feedback messages. It displays in a virtual box that pops up on the screen.
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use any of the following.
To use this alert just use class name alert and also add the following class alert-primary alert-secondary alert-danger alert-success alert-warning (e.g.class="alert-box alert-primary")
Alerts can also wait for the user to dismiss it.
To use this alert you just have to add a button with class btn-close and id alert-close-btn
The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
The Avatar component comes in 5 sizes. For proper styling, use any of the following.
To use this avatar just use class name avatar and also add class according to avatar type: avatar-lg, avatar-md avatar-sm avatar-xs avatar-lg
Avatars can also have text instead of picture.
To use this avatar just add a following class to previous classes i.e. avatar-text
H
H
H
H
H
The Badge component is used to represent a user's status - online, offline etc. They can also be used to display a notification or cart count.
To use this badge component just use wrap the html in the div having a class named badge-component
To use this badge uou can copy html part from below code snippet.
The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
Primary actions, or things that we want the user to do as often as possible. Buttons that execute primary actions—primary buttons—should be as visible as possible.
Floating buttons are used to perfom a particular function for example talking to a customer care person, moving towards the top of the page etc.
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Use to portray important information regarding what is being display on cards. Such as newBest Seller etc.
NEW
BEST SELLER
Native UI provides with dismiss option for cards too. Add the proper HTML code to use it.
Disabled Cards are useful to depict a disable feature. For eg if the product if out of stock
, we can use them.
Cards with only textual information.
Native Paws is the name that visions to comfort pets and pet parents by catering the market of pet essentials. We aim to reach at every doorstep around the globe & serve our cuddle buddies the best quality products.
At Native Paws, you will find a flawless experience in searching for the right product for your pets.
Vertical cards provided by Native UI can be used for displaying products.
Small devices, horizontal cards come to action.
Images are an integral part of the content strategy of any website. They convey some important information without the need of textual content.
All the images are responsive.
Images should show responsive behavior so they never become larger than their parent elements.
Use class: img-responsivewhich adds a max-width: 100% and height: auto
Round or Cirular Images are used mainly for avatars or any image feature link.
Add a classimg-circularto the img tag to use this component.
Inputs are the main component that is used for user's interaction with the web app. Inputs are used to take important information from the user, and then save the data.
Textboxes are used to collect more detailed information from the user, rather than just providing values or options.
Validation for inputs is used to ensure that the user is not entering the false information or leaving the field empty.
A simple sign up/ log in form could look like this.
Grids are very useful in arranging the content over the website hasle free.
Add class:
Add class: grid to the paren div. And add the following as per requiremene.
grid-20-80 , grid-3-col , grid-50-50 , grid-4-colAdd class: grid-3-col to the paren div.
Lists can be used at so many places, navigation bar, stacked notifications, article pages, etc. They can be nested or simple
Add class: list to the parent div. And add the following as per requirement.
list, list-disc, list-circle, list-decimal, list-triangle, list-roman, list-alpha
Liked Your Photo
Started Following You
Mentioned You
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the so that modal content scrolls instead.
Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
For including a live modal, just add id = "live-modal-con"
Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
A Navigation bar helps in accessing information. It is the UI element on a webpage that includes links for the other sections of the website. The navbar provided by native is also responsive. It will turn into a hamburger menu when the width decreases.
It has the following fields
Logo, Search box, social links section, Button Links, Icon Links, Hamburger,
Native's 5-star ratings component can be used to allow the users to share their opinion about the product, documentation page, photo and more.
Sliders are used to decide range for something like sound in videos, price in shopping sites, etc..
Typography is a feature of Native UI for styling and formatting the text content. It is used to create customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles and much more.
For heading u can use h1, h2, h3, h4, h5, h6 elements. The same font-styling is present for class names h1, h2, h3, h4, h5, h6 class. You can add one of these classes to style the text.
For paragraph u can use p element.
Add class: text-sm , text-rg , text-md , text-lg , text-extra-lg
Normal Paragraph Text
Small Font Text
Regular Font Text
Medium Text
Large Font Text
Extra Large Text
Native UI provide a font-weight to the text too.
Add class: text-extra-light , text-light , text-regular , text-bold , text-extra-bold
Extra Light Text
Light Text
Regular Text
Bold Text
Bolder Large Text
Extra Bold Text
Native UI provides text-alignment also.
Add class: text-left , text-center , text-right
Left Text
Native UI provides text Utilities such as: small-text, strikethrough, grey-text, lowercase text, uppercase text, capitalise text and marked text.
Add class: text-lowercase , text-uppercase , text-captializw , text-grey , text-strikethrough
LOWERCase teXt
uppercase text
Toasts, sometimes called snackbars or banners, make for great medium-attention notifications because they are non-disruptive. Users can continue using the product while being informed about the (hopefully) important stuff and any supplementary options to the current user action.
Native UI provides different types of toast such as: success, error, normal and stacked. Native UI provides different types of toast such as: success, error, normal and stacked.
Add class: toast and add a following class: toast-success , toast-stacked , toast-content , toast-dismiss , toast-error.
