Copy-paste this code to the <head> section of your index.html file:
Alternatively, download the minified stylesheet from this site, or Github.
Or install from with the following terminal command:
And add the link as a reference to a local file:
Note: update the path according to your file structure.
React.js: In order to import the stylesheet into a React app, add the following line to the root index.js file:
Or the minified version:
<button class="lin-button"> Primary </button>
<button class="lin-button is-secondary"> Secondary </button>
<button class="lin-button is-danger"> Danger </button>
<button class="lin-button" disabled> Disabled </button>
<button class="lin-button is-flat"> Primary </button>
<button class="lin-button is-flat is-secondary"> Secondary </button>
<button class="lin-button is-flat is-danger"> Danger </button>
<button class="lin-button is-flat" disabled> Disabled </button>
<button class="lin-button is-lite"> Primary </button>
<button class="lin-button is-lite is-secondary"> Secondary </button>
<button class="lin-button is-lite is-danger"> Danger </button>
<button class="lin-button is-lite" disabled> Disabled </button>
<div class="lin-card"> Card elevated </div>
<div class="lin-card is-flat"> Card flat </div>
<div class="lin-code"> <pre> Code snippet </pre> </div>
Code snippet
<div class="lin-code is-terminal"> Terminal command </div>
<form name="contact" method="POST"> <p> <label class="lin-input-label"> Name <input class="lin-input" type="text" name="name"/> </label> </p> <p> <label class="lin-input-label"> Email <input class="lin-input" type="email" name="email"/> </label> </p> <p> <label class="lin-input-label"> Role <select class="lin-input" name="role[]"> <option value="leader">Leader</option> <option value="follower">Follower</option> </select> </label> </p> <p> <label class="lin-input-label" > Message <textarea class="lin-input" name="message"> </textarea> </label> </p> <p> <label class="is-flex-center"> <input type="checkbox" name="fine"> That's fine </label> </p> <p> <label class="is-flex-center"> <input type="radio" name="accept" value="yes" checked> Yes </label> <label class="is-flex-center"> <input type="radio" name="accept" value="no"> No </label> </p> <p> <button class="lin-button" type="submit"> Send </button> </p> </form>
<i class="lin-icon-facebook"></i>
<i class="lin-icon-twitter"></i>
<i class="lin-icon-linkedin"></i>
<i class="lin-icon-github"></i>
<i class="lin-icon-rss"></i>
<i class="lin-icon-dribbble"></i>
<i class="lin-icon-instagram"></i>
<i class="lin-icon-pinterest"></i>
<i class="lin-icon-flickr"></i>
<i class="lin-icon-youtube"></i>
<i class="lin-icon-telegram"></i>
<i class="lin-icon-googleplus"></i>
<i class="lin-icon-slack"></i>
<i class="lin-icon-keybase"></i>
<i class="lin-icon-npm"></i>
<i class="lin-icon-netlify"></i>
<i class="lin-icon-medium"></i>
<i class="lin-icon-vk"></i>
<i class="lin-icon-wechat"></i>
<i class="lin-icon-sinaweibo"></i>
<i class="lin-icon-tencentqq"></i>
<i class="lin-icon-quora"></i>
<i class="lin-icon-gitlab"></i>
<i class="lin-icon-bitbucket"></i>
<i class="lin-icon-whatsapp"></i>
<i class="lin-icon-viber"></i>
<i class="lin-icon-amazon"></i>
<i class="lin-icon-azure"></i>
<i class="lin-icon-devops"></i>
<i class="lin-icon-steam"></i>
<i class="lin-icon-twitch"></i>
<i class="lin-icon-discord"></i>
<i class="lin-icon-docker"></i>
<i class="lin-icon-messenger"></i>
<i class="lin-icon-skype"></i>
<i class="lin-icon-snapchat"></i>
<i class="lin-icon-behance"></i>
<i class="lin-icon-tiktok"></i>
<i class="lin-icon-applepay"></i>
<i class="lin-icon-googlepay"></i>
<i class="lin-icon-paypal"></i>
<i class="lin-icon-lincss"></i>
<img class="lin-image" src="[path]">
<img class="lin-image is-round" src="[path]">
<div class="lin-message"> Notification message. <div class="lin-close"></div> </div>
<div class="lin-message is-secondary"> Secondary message. <div class="lin-close"></div> </div>
<div class="lin-message is-warning"> Warning message. <div class="lin-close"></div> </div>
<div class="lin-message is-danger"> Error message. <div class="lin-close"></div> </div>