monday-ui-react-core/src/general-stories/typography/typography-helpers.js

Official monday.com UI resources for application development in React.js

export const typographyList = [
  {
    name: "Main",
    className: "element-type-h1",
    weight: 500,
    size: "32px",
    lineheight: "52px",
    spacing: -1,
    comments: "Main header on a page <h1>"
  },

  {
    name: "Title",
    className: "element-type-h2",
    weight: 500,
    size: "24px",
    lineheight: "32px",
    spacing: -0.2,
    comments: "Secondary header <h2>"
  },

  {
    name: "Title Secondary",
    className: "element-type-h3",
    weight: 300,
    size: "24px",
    lineheight: "32px",
    spacing: -0.2,
    comments: "After heading, profile page headings <h3>"
  },

  {
    name: "Subtitle",
    className: "element-type-h4",
    weight: 500,
    size: "18px",
    lineheight: "24px",
    spacing: 0,
    comments: "Group name, subheading in admin <h4>"
  },

  {
    name: "Paragraph Bold",
    className: "element-type-h5",
    weight: 500,
    size: "16px",
    lineheight: "24px",
    spacing: 0,
    comments: "Paragraph Bold <h5>"
  },

  {
    name: "General Text",
    className: "element-type-h6",
    weight: 400,
    size: "14px",
    lineheight: "24px",
    spacing: 0,
    comments: "General Text <h6>"
  },

  {
    name: "Paragraph",
    className: "element-type-p",
    weight: 400,
    size: "16px",
    lineheight: "24px",
    spacing: 0,
    comments: "Pulse name, text in update <p>"
  },

  {
    name: "Caption / Subtext",
    className: "element-type-small",
    weight: 400,
    size: "14px",
    lineheight: "18px",
    spacing: 0,
    comments: "Caption / Subtext <small>"
  },

  {
    name: "Input",
    className: "input",
    weight: 400,
    size: "14px",
    lineheight: "22px",
    spacing: 0,
    comments: "Buttons, forms"
  },

  {
    name: "Link",
    className: "element-type-link",
    weight: 400,
    size: "14px",
    lineheight: "22px",
    spacing: 0,
    comments: "Links"
  }
];