Typography

You can find documentation and examples for Sirius UI typography, including global settings, headings, body texts, lists and more.

Text Elements

  • Heading : Used for headings. h1 element by default.
  • Paragraph : Used for paragraphs. p element by default.
  • Text : Used for single-line texts. span element by default.
  • Link : Used for anchor links. a element by default.
  • Strong : Used for bold texts. strong element by default.
  • Small : Used for inline small tests. small element by default.
  • Code : Used for inline code texts. code element by default.
  • Pre : Used for preformatted content. pre element by default.

List Elements

  • UnorderedList : Used for unordered lists. ul element by default.
  • OrderedList : Used for ordered lists. ol element by default.
  • ListItem : Used for list items insisde unordered and ordered lists. li element by default.

We use 3 font family stacks. ui, display, and monospace. We use Mukta as our default font for ui and display categories.

Heading Styles

h1. Muhsis Heading

h2. Muhsis Heading

h3. Muhsis Heading

h4. Muhsis Heading

h5. Muhsis Heading
h6. Muhsis Heading

Display 1

Display 2

Display 3

Display 4

Paragraph Styles

You can apply iSLead property to Paragraph component. View properties table to view all properties that can be applied to component.

Lead paragraph. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

You can use inline text components such as bold small inside a paragraph. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Text Styles

View properties table to view all properties that can be applied to component.

Inlinetextelement!
Cras justo odio, dapibus ac facilisis in, egestas eget quam.Cras justo odio, dapibus ac facilisis in, egestas eget quam.Cras justo odio, dapibus ac facilisis in, egestas eget quam.Cras justo odio, dapibus ac facilisis in, egestas eget quam.Cras justo odio, dapibus ac facilisis in, egestas eget quam.Cras justo odio, dapibus ac facilisis in, egestas eget quam.Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Link Styles

You can apply regular html anchor properties such as href, target to Link component. View properties table to view all properties that can be applied to component.

There's an inline link element inside the sentence.

There's an inline link element inside the sentence.

There's an inline link element inside the sentence.

There's an inline link element inside the sentence.

There's an inline link element inside the sentence.

There's an inline link element inside the sentence.

There's an inline link element inside the sentence.

There's an inline link element inside the sentence.

List Styles

You can use UnorderedList component with icons and variants. You must use ListItem component inside lists.

  • Etiam porta sem malesuada magna mollis euismod.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.
  • Maecenas faucibus mollis interdum.
  • Etiam porta sem malesuada magna mollis euismod.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.
  • Maecenas faucibus mollis interdum.
  • Etiam porta sem malesuada magna mollis euismod.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.
  • Maecenas faucibus mollis interdum.
  • Etiam porta sem malesuada magna mollis euismod.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.
  • Maecenas faucibus mollis interdum.
  • Etiam porta sem malesuada magna mollis euismod.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  1. Etiam porta sem malesuada magna mollis euismod.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Nullam id dolor id nibh ultricies vehicula ut id elit.
  4. Maecenas sed diam eget risus varius blandit sit amet non magna.
  5. Maecenas faucibus mollis interdum.

Description List Styles

You can use DescriptionList, DescriptionTerm, DescriptionDefinition to create description lists.

Logistics
The management of products or other resources as they travel between a point of origin and a destination.
Sole proprietorship
A business structure where a single individual both owns and runs the company.
Discount code
A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.