TypographyStylesProvider

Add Mantine typography styles to your html content
Import

Usage

Mantine does not expose global styles. Use TypographyStylesProvider to add Mantine typography styles to your html content:

import { TypographyStylesProvider } from '@mantine/core';
function Demo() {
return (
<TypographyStylesProvider>
<div dangerouslySetInnerHTML={{ __html: '<p>Your html here</p>' }} />
</TypographyStylesProvider>
);
}

Example

Example with Wikipedia page part

We Butter the Bread with Butter

WBTBWB at Rock in Caputh 2013

We Butter the Bread with Butter (also known as WBTBWB) is a German deathcore band noted for their heavy use of electronic music characteristics.[1][2] The group was founded in 2007 by Marcel Neumann, was signed to Redfield Records and have released two albums through the label. Their debut album Das Monster aus dem Schrank was released on November 21, 2008.[3] Their second album, Der Tag an dem die Welt unterging was released May 14, 2010, followed on December 19, 2012 by an EP titled Projekt Herz. Their third studio album, Goldkinder, was released on August 9, 2013, and a fourth album, Wieder geil!, was released on May 22, 2015.

History

We Butter the Bread with Butter was founded in 2007 by Marcel Neumann, who was originally guitarist for Martin Kesici's band,[4] and Tobias Schultka. The band was originally meant as a joke, but progressed into being a more serious musical duo. The name for the band has no particular meaning, although its origins were suggested from when the two original members were driving in a car operated by Marcel Neumann and an accident almost occurred. Neumann found Schultka "so funny that he briefly lost control of the vehicle."[4] Many of their songs from this point were covers of German folk tales and nursery rhymes.[5]

Dates

  • On June 28, 2012, Kenneth Duncan announced his departure from the band via his personal Facebook page, citing creative and personal differences.
  • On October 28, 2012 the band posted a video on YouTube called We Butter the Bread with Butter - New EP and Album Trailer. The video says that the EP will come out in 2012 and new album will come out on April 12, 2013. The day after the band Posted a picture of the album art for Projekt Herz EP on Facebook.
  • On November 11, 2012 the band posted one of the new songs from their new EP on Facebook. The song name is USA. On December 19, 2012 the band released an EP titled Projekt Herz.
  • On February 17, 2013 the band posted a video on YouTube announcing the release date of their upcoming album - August 9, 2013 On April 21, 2013 the band revealed via Facebook the cover and the name of the third album, Goldkinder, which will be released on August 9, 2013.
import React from 'react';
import { TypographyStylesProvider } from '@mantine/core';
function Demo() {
return <TypographyStylesProvider dangerouslySetInnerHTML={{ __html: html }} />;
}

All styles demo

TypographyStylesProvider includes styles for:

  • paragraphs
  • headings
  • lists
  • blockquotes
  • tables
  • links
  • images
  • hr
  • code and pre

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Mantine link

Lorem ipsum, dolor sitamet consectetur adipisicing elit. Provident omnis laudantium itaque quisquam est, magnam harum, cum molestias necessitatibus obcaecati quod esse debitis velit nemo dolores deserunt. Quia, iure doloremque.

Unsplash image
  • list item - 1
  • list item - 2
  • list item - 3
  • list item - 4
  1. list item - 1
  2. list item - 2
  3. list item - 3
  4. list item - 4
Life is like an npm install – you never know what you are going to get. – Forrest Gump

This is Code inside paragraph

import React from 'react';
import { Avatar } from '@mantine/core';
import image from './image.png';

export function AvatarDemo() {
  return <Avatar src={image} alt="it's me" />;
}
Element positionElement nameSymbolAtomic mass
6CarbonC12.011
7NitrogenN14.007
39YttriumY88.906
56BariumBa137.33
58CeriumCe140.12
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback