47ng Design System

Built with ChakraUI and MDX.

• Typography
• Lists
• Code Blocks
• Notes
• Post References

Typography#

H1 heading

H2 heading#

H3 heading#

H4 heading#

H5 heading#

H6 heading#

Paragraph of text

italic text

bold text

bold italic

strikethrough

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra eu sapien ut tempor. Nunc id blandit nisi. Cras euismod convallis massa in luctus. Aenean vel pretium eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in placerat purus. Mauris semper ex pharetra, fermentum sem sed, eleifend sapien. Suspendisse potenti.

Aenean aliquam magna in urna facilisis facilisis. Nam in faucibus est. Aenean in volutpat sapien. Suspendisse blandit velit dui, id euismod tellus blandit et. In sagittis ligula velit, sed malesuada enim mollis eu. Suspendisse potenti. Morbi eget dolor vitae dolor pulvinar placerat pretium in ipsum. Nullam non tincidunt quam. Quisque blandit sed nunc congue vehicula. Aliquam in diam turpis. Pellentesque placerat lorem in mattis molestie.

Aliquam diam ligula, ultrices ac lacus sit amet, tempus tincidunt massa. Suspendisse ipsum sem, pulvinar at turpis eget, posuere commodo orci. Mauris at hendrerit enim, nec malesuada libero. Donec vitae diam ac massa pretium maximus at ut erat. Aliquam posuere, magna et tempus porta, nibh tellus lacinia quam, vel vulputate sapien nisl nec orci. Cras scelerisque odio vel mattis pellentesque. Vivamus tempus fermentum mauris, ac facilisis magna elementum sit amet. Praesent non aliquet nisi, ac ornare orci.

Quisque semper eu massa et condimentum. In pulvinar, justo vitae condimentum aliquet, enim neque malesuada nunc, eget sodales velit tellus vitae ex. Suspendisse tincidunt erat vitae ipsum luctus ornare in vitae justo. Integer eu mi scelerisque, viverra nisl id, placerat odio. Pellentesque risus nibh, volutpat sed molestie vel, convallis ut nisl. Etiam sit amet ultrices odio. Nam ornare in felis quis bibendum. Vivamus et magna id magna lacinia suscipit a hendrerit risus. Nam sit amet orci sit amet massa euismod sodales. Cras porta metus at est finibus mollis. Vestibulum nibh turpis, pharetra at lectus quis, accumsan imperdiet felis. Nunc sed mauris euismod, tincidunt leo vitae, scelerisque turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blockquote

Multiline block quote

With a line break

Blockquote with author attribution:

Of course it is happening inside your head, Harry, but why on earth should that mean that it is not real?

Albus Dumbledore, Harry Potter And The Deathly Hallows

Emojis should be accessible: 🇫🇷😁🎉

Lists#

• foo
• bar
• egg

1. foo
2. bar
3. egg

Nested lists:

• without
  • any
    • numbers

Code Blocks#

inline code

code block without code type

import { createChakraNextApp, defaultTheme } from '@47ng/chakra-next'

const foo = true || (null && undefined) ? Infinity : NaN

export default createChakraNextApp({
  theme: {
    ...defaultTheme,
    colors: {
      ...defaultTheme.colors
      // your colors here
    }
  }
})

Code block with title

const foo = (p: any) => {
  const isInternal = p.href.startsWith('#') || p.href.startsWith('/')
  const color = useLinkColor()
  if (isInternal) {
    return <RouteLink to={p.href} color={color} {...p} />
  }
  return <StyledLink color={color} {...p} />
}

Code block with line highlighting:

const foo = (p: any) => {
  const isInternal = p.href.startsWith('#') || p.href.startsWith('/')
  const color = useLinkColor()
  if (isInternal) {
    return <RouteLink to={p.href} color={color} {...p} />
  }
  return <StyledLink color={color} {...p} />
}

Code block with title and line highlighting:

const foo = (p: any) => {
  const isInternal = p.href.startsWith('#') || p.href.startsWith('/')
  const color = useLinkColor()
  if (isInternal) {
    return <RouteLink to={p.href} color={color} {...p} />
  }
  return <StyledLink color={color} {...p} />
}

Code in link: 47ng/cloak

Code surrounded by text, in link: foo 47ng/cloak bar

Notes#

Annotations#

Default mark

Red underline

Blue circle

Green box

Yellow highlight

Black strikethrough

Crossed-off

Testing bounds overspill on surrounding annotations.

Post References#