Standard INFN design guidelines for web development.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
Welcome to the world of INFN Design Standards — meticulously crafted to empower developers in creating web applications that effortlessly embody the essence of INFN's unique identity. Dive into this curated collection of classes and stylesheets, ensuring a harmonious blend of aesthetics and functionality across the entire INFN web infrastructure.
Include the INFN Design Standards Stylesheet in the <head> of your HTML file:
<!-- INFN Design Standards Stylesheet -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ettore-infn/INFN-Design-Standards@main/static/style/infn-style.css">Now you can start building your website, confident that you're aligning with INFN's design principles with every line of code.
Note
Consider importing the fontawesome library to implement icons.
Uncover the elegance of INFN buttons, designed to seamlessly integrate with your user interface. Immerse yourself in three distinct types: primary, danger, and warning. From sophisticated regular buttons to subtle outline options and borderless wonders, customize sizes from normal to large.
Tip
Enchant your users with meaningful icons, providing an intuitive touch to your button interactions.
Regular buttons, your trusted companions for primary actions, elegantly guide users toward essential goals:
<div class="infn-btn infn-btn-primary">Primary</div>
<div class="infn-btn infn-btn-danger">Danger</div>
<div class="infn-btn infn-btn-warning">Warning</div>Embrace outline buttons for secondary actions, allowing your design to balance prominence and subtlety:
<div class="infn-btn infn-btn-primary-outline">Primary</div>
<div class="infn-btn infn-btn-danger-outline">Danger</div>
<div class="infn-btn infn-btn-warning-outline">Warning</div>Choose outline buttons with no borders for a seamless integration into your interface, letting your content shine:
<div class="infn-btn infn-btn-primary-outline-no-border">Primary</div>
<div class="infn-btn infn-btn-danger-outline-no-border">Danger</div>
<div class="infn-btn infn-btn-warning-outline-no-border">Warning</div>Make a bold statement by increasing button size with the class infn-btn-lg:
<div class="infn-btn infn-btn-primary infn-btn-lg">Primary</div>
<div class="infn-btn infn-btn-danger-outline infn-btn-lg">Danger</div>Embrace round buttons for a space-efficient touch, perfect for streamlined interactions:
<div class="infn-btn-round"><i class="fas fa-bookmark"></i></div>Text, the storyteller of your user interface. Master the art of text usage to enhance readability and create an engaging experience.
Titles, the first chapter of your narrative. Employ them strategically to captivate users from the start:
<div class="infn-title">Infn Title example</div>Subtitles, the supporting actors. Add depth to your narrative by providing context beneath the main title:
<div class="infn-subtitle">Infn subtitle example</div>Section titles, the scene changers. Guide users through your content with these distinctive markers:
Tip
Add an icon to make the purpose of the section clear.
<div class="infn-section-title"><i class="fas fa-cloud"></i> Infn section Title example</div>Section subtitles, the storytellers within. Enhance readability by dividing text or adding design details:
Tip
Like the section title, adding an icon would help the user to identify the section faster.
<div class="infn-section-subtitle"><i class="fas fa-cloud"></i> Infn section subtitle example</div>Use the plain text to write all the text. You don't need to specify a class to use it:
<p>Infn text example</p>INFN inputs — seamlessly designed to enrich user interactions and provide a delightful experience.
A sleek search bar to filter through content and discover with ease:
<div class="infn-input-search-container">
<input class="infn-input-search" type="text" placeholder="Search...">
<i class="fas fa-search"></i>
</div>Simplicity meets functionality with the text input element, capturing user input texts:
<div class="infn-form-group">
<label for="description">Label Text</label>
<input name="description" class="infn-form-group-input" type="text" placeholder="Description">
</div>Engage your users with intuitive option inputs, enabling them to choose from curated selections seamlessly:
<div class="infn-form-group">
<label for="select">Choose a option:</label>
<select name="select" class="infn-form-group-input">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
</div>Explore the elegance and functionality of INFN Cards, thoughtfully designed for a delightful content presentation.
The INFN Card Element is a visual delight, elevating your content presentation with a touch of sophistication. It offers a clean and organized canvas for your information:
<div class="infn-card">
<div class="infn-title">Card Title</div>
<br>
<div class="infn-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, porro sapiente ipsa quas aut tempore dolorem, nam quam veritatis delectus, voluptate consectetur nulla eaque obcaecati illo corrupti ea ipsum asperiores! Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sequi cumque, animi ab ratione corrupti doloribus vitae accusamus quas autem necessitatibus ipsam officia non soluta, sapiente temporibus a aliquam architecto!</div>
<br><br>
<div class="infn-btn infn-btn-primary infn-btn-lg">Let's go!<i class="fas fa-arrow-right"></i></div>
</div>The counter is more than just a numeric display; it's a visual storyteller designed to elevate your content presentation:
<div class="infn-counter">
<div class="infn-counter-text">
<i class="fas fa-check-circle"></i> Element count
</div>
<div class="infn-counter-num">
7
</div>
</div>