typography

@# Typography

Construct-ui sets a number of global CSS styles for headings, paragraphs, lists, code blocks and links.

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

m('h1', 'H1 Heading'),
m('h2', 'H2 Heading'),
m('h3', 'H3 Heading'),
m('h4', 'H4 Heading'),
m('h5', 'H5 Heading'),
m('h6', 'H6 Heading')

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor, nisl sed sagittis lacinia, libero tellus varius libero, ut rhoncus tellus justo sed turpis. Suspendisse commodo nisl nibh, sit amet malesuada arcu aliquam in. Morbi eget eros rhoncus, fringilla tellus nec, cursus metus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

m('p', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor, nisl sed sagittis lacinia, libero tellus varius libero, ut rhoncus tellus justo sed turpis. Suspendisse commodo nisl nibh, sit amet malesuada arcu aliquam in. Morbi eget eros rhoncus, fringilla tellus nec, cursus metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. ')

Links

I am a link

m('a', { href: '#' }, 'I am a link')

Lists

• Lorem ipsum dolor sit amet

• Consectetur adipiscing elit

• Nulla volutpat aliquam velit

  • Phasellus iaculis neque

  • Ac tristique libero volutpat at

• Faucibus porta lacus fringilla vel

• Eget porttitor lorem

m('ul', [
  m('li', 'Lorem ipsum dolor sit amet'),
  m('li', 'Consectetur adipiscing elit'),
  m('li', [
    'Nulla volutpat aliquam velit',
    m('ul', [
      m('li', 'Phasellus iaculis neque'),
      m('li', 'Ac tristique libero volutpat at'),
    ])
  ]),
  m('li', 'Faucibus porta lacus fringilla vel'),
  m('li', 'Eget porttitor lorem'),
])

Code

Inline code

  
    m('', 'Sample code block content'),
    m('', 'Sample code block content'),
    m('', 'Sample code block content')
  

Text Utilities

This text is muted

This text is disabled

import { Classes } from 'construct-ui';

m(`p.${Classes.TEXT_MUTED}`, 'This text is muted'),
m(`p.${Classes.TEXT_DISABLED}`, 'This text is disabled')