Style Guide

A collection of UI elements

Typography

Font Selection

In this section, we explore the typography and font choices that contribute to the visual style of the application.

Headings(h1, h2, h3, h4, h5, h6 tags)
Fragma Medium
Content
Eve Sans Neue Expanded
Special Emphasis
Eve Sans Neue Condensed

Headings

The main heading of our application uses a bold and modern font to make a strong visual impact. It sets the tone for the entire user interface.

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;':,.<>?/

Body Text

The body text is presented in a clean and readable font. It ensures a comfortable reading experience for users interacting with different sections of our application.

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;':,.<>?/

Special Emphasis

For special emphasis, such as highlighting important information or calls to action, we use a distinctive font style to draw the user's attention.

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;':,.<>?/

Headings

Display 1

Display 2

Display 3

Display 4

Display 5

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

This is a paragraph of text. It can contain multiple lines and cover various topics.

Blockquote

This is a blockquote. It's a great way to emphasize a portion of text.

Lists

Ordered List

  1. Item 1
  2. Item 2
  3. Item 3

Unordered List

  • Item A
  • Item B
  • Item C

Buttons

Free-standing Buttons





Disabled Buttons





Alerts

Delayed Fading Alerts

Dismissible Alerts

Form Elements

Input Field

Disabled Input Field

Text Area

Disabled Text Area

Checkboxes

Left Label
Left Label

Radio Buttons

Select Box

Form Validation States

This input is valid.
This input is invalid.

Navigation

Tab 1 content
Tab 2 content
Tab 3 content

Cards

Card Title

Some example text.

Image Alt Text
Card Title

Some example text.

Card Title

Some example text.

Button 1 Button 2
Featured
Card Title

Some example text.

Tables

Basic Table

Description of the table
# First Last Handle
1 Mark Otto @mdo

Striped Rows

Description of the table.
# First Last Handle
1 Mark Otto @mdo

Hover Rows

Description of the table.
# First Last Handle
1 Mark Otto @mdo

Table with Responsive Breakpoints

Description of the table.
# First Last Handle
1 Mark Otto @mdo

Modals

Basic Modal

Modal with Form

Modal with Image

Modal with Image

Dismissible Modal

Tooltips and popovers

Progress Bars

25%
25%
25%
25%
50%

Icons

Bootstrap Icons

Custom Icons

Badges and Labels

Badges

Basic Badge Success Warning Danger

Labels

Information

Accordion and Collapse

Basic Accordion

Content of Section 1 goes here.

Content of Section 2 goes here.

Content of Section A goes here.

Content of Section B goes here.

Media Objects

Image Caption
Image Caption

Your image description or additional information goes here.

Tabs And Pills

Tabs with Content

Content for Home tab goes here.

Content for Profile tab goes here.

Content for Contact tab goes here.

Pills Navigation

Content for Home pill goes here.

Content for Profile pill goes here.

Content for Contact pill goes here.

Basic Image Carousel

Panels

Basic Panel

This is a basic panel without additional navigation links.

Panel with Navigation Links

This is a panel with navigation links using Bootstrap tabs.

Dropdowns

Spinners And Loaders

Loading...

Chips

Basic Chip