Typography

Typography - Bootstrap 5 & Fluent Design component

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.

Note: Read the API tab to find all available options and advanced customization

Font

You should use one font throughout your app's UI, and we recommend sticking with the default font for Windows apps, Segoe UI. It's designed to maintain optimal legibility across sizes and pixel densities and offers a clean, light, and open aesthetic that complements the content of the system.



                      ABCDEFGHIJKLMNOPQRSTUVWXYZ
                      abcdefghijklmnopqrstuvwxyz
                      1234567890

Hierarchy

Users rely on visual hierarchy when scanning a page: headers summarize content, and body text provides more detail. To create a clear visual hierarchy in your app, follow the Windows type ramp.

lets the reader know

where to look first.



                      Hierarchy
                      lets the reader know
                      where to look first.

Type ramp

The Windows type ramp establishes crucial relationships between the type styles on a page, helping users read content easily. All sizes are in effective pixels and are optimized for UWP apps running on all devices.

Subheader

Title

Subtitle

Base

Body

Caption



                      Header
                      Subheader
                      Title
                      Subtitle
                      Base
                      Body
                      Caption

Title - API

Usage

Via data attributes

Via JavaScript


                    var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.


                    $('.example-class').ripple(options);

Options

Name	Type	Default	Description
`tag`	String	`'button'`	Changes button tag

Methods

Name	Description	Example
`toggle`	Manually toggles a modal	`myModal.toggle()`


                    var myModalEl = document.getElementById('myModal')
                    var modal = new mdb.Modal(myModalEl)
                    modal.toggle()

Events

Name	Description
`show.bs.modal`	This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.


                    var myModalEl = document.getElementById('myModal')
                    myModalEl.addEventListener('show.bs.modal', function (e) {
                    // do something...
                    })

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:


                    import { Modal } from 'mdb-ui-kit';