This is usmvno.keepcalling.net typography page. We tried to cover every element we used to build the store

Buttons

btn-xs btn-sm btn normal btn-lg with tooltip .btn-blue

btn-xs btn-sm btn normal btn-lg with tooltip .btn-blue_border

btn-xs btn-sm btn normal btn-lg with tooltip .btn-green

btn-xs btn-sm btn normal btn-lg with tooltip .btn-green_border

btn-xs btn-sm btn normal btn-lg .btn-orange

btn-xs btn-sm btn normal btn-lg .btn-orange_border

btn-xs btn-sm btn normal btn-lg .btn-purple

btn-xs btn-sm btn normal btn-lg .btn-purple_border

btn-xs btn-sm btn normal btn-lg .btn-green

btn-xs btn-sm btn normal btn-lg .btn-blue

btn-xs btn-sm btn normal btn-lg .btn-link

btn-xs btn-sm btn normal btn-lg .btn-link .btn-inline-link

btn-xs btn-sm btn normal btn-lg .btn-default

btn-xs btn-sm btn normal btn-lg .btn-primary

btn-xs btn-sm btn normal btn-lg .btn-success

btn-xs btn-sm btn normal btn-lg .btn-info

btn-xs btn-sm btn normal btn-lg .btn-warning

btn-xs btn-sm btn normal btn-lg .btn-danger









Input types

<input> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format.

<input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.

<input> elements of type datetime-local create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.

<input> elements of type email are used to let the user enter and edit an e-mail address, or, if the multiple attribute is specified, a list of e-mail addresses.

<input> elements with type="file" let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript

<input> elements of type hidden let web developers include data that cannot be seen or modified by users when a form is submitted.

<input> elements of type image are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.

<input> elements of type month create input fields that let the user enter a month and year allowing a month and year to be easily entered.

<input> elements of type week create input fields allowing easy entry of a year plus the ISO 8601 week number during that year

<input> elements of type url are used to let the user enter and edit a URL

<input> elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.

<input> elements of type tel are used to let the user enter and edit a telephone number.

<input> elements of type password provide a way for the user to securely enter a password.

<input> elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value.

<input> elements of type reset are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values.

<input> elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently by the user agent.

<input> elements of type submit are rendered as buttons. When the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.

<input> elements of type text create basic single-line text fields.

<input> elements of type time create input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds).

*For the url and email type verifications to be visible you need to press this button
**For more information regarding the input types and more examples please visit this link and select the desired input type

Input groups

tooltip here
TEST TEL FIELDS

Backgrounds

.bg-grey
.bg-grey_light
.bg-grey_dark
.bg-blue
.bg-green
.bg-white
.bg-purple
.bg-orange
.bg-yellow

Switches

Progress elements

x.yGB
Lorem ipsum dolor
x.yGB
Lorem ipsum dolor
x.yGB
Lorem ipsum dolor

Typography 2025

We have updated the typography styles.

Headings

Class Example
.x-heading-xl

This is a heading
.x-heading-2xl

This is a heading
.x-heading-3xl

This is a heading
.x-heading-4xl

This is a heading
.x-heading-5xl

This is a heading
.x-heading-6xl

This is a heading
.x-heading-7xl

This is a heading
.x-heading-8xl

This is a heading

Body Texts

Class Example
.x-body-xs Lorem ipsum dolor sit amet consectetur.
.x-body-sm Lorem ipsum dolor sit amet consectetur.
.x-body-md Lorem ipsum dolor sit amet consectetur.
.x-body-lg Lorem ipsum dolor sit amet consectetur.
.x-body-xl Lorem ipsum dolor sit amet consectetur.
.x-body-2xl Lorem ipsum dolor sit amet consectetur.
.x-body-3xl Lorem ipsum dolor sit amet consectetur.
.x-body-4xl Lorem ipsum dolor sit amet consectetur.

Typography

h1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h5

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h6

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h5

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h6

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h5

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

h6

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
nested md-2
nested col-md-4 col-md-offset-2
nested md-3
md-2
md-2 md-offset-1

Cards

Lorem Ipsum

Z GB
+
# GB
FREE
$##/month
  • Unlimited calls & texts
  • 4G LTE speed for:
    # GB + # GB FREE
    64 kbps unlimited usage

Lorem Ipsum

Z GB
+
# GB
FREE
$##/month
  • Unlimited calls & texts
  • 4G LTE speed for:
    # GB + # GB FREE
    64 kbps unlimited usage

Collapse

Alerts

Icons






SVG Included using use tag

SVG Included using image tag

SVG Included using use tag

Interacting with SVG


CAUTION!

SVG's used as image or image background can be only partially modified by CSS, have no interactive SVG animation and no posibility to be manipulated by JS

Styling using inline CSS

Styling using CSS 3 Classes (class svg_red)

CSS3 Transform

Color change on click

SVG Animate (Not working in IE8)

SVG Animate Multiple Paths (Not working in IE8)

CSS3 Animation Blink

Reusing SVG (If we don't clone the svg it will be affected by all changes CLICK THE WORKER ABOVE)*

Reusing SVG Cloned (Notice this is not affected by other changes)

*The onclick changes are affecting both workers beacause they are both pointing to the same SVG element. When we clone another work using the JS cloneSVG function we are creating another svg node that can be stiled or handled on it's own