Typography

StepOne provides a comprehensive set of typography styles that you can use to enhance the readability and visual appeal of your website's content. Whether you need headers, paragraphs, or other text elements, StepOne has got you covered. Let's explore the various typography styles and how to use them effectively.

Headers and paragraphs

StepOne offers six header styles, ranging from h1 to h6. Each header style has its own visual hierarchy and significance. Here's an overview of each header style and how to use them:

• <h1> - The largest and most important header. Use it sparingly for page titles or main headings.
• <h2> - A secondary heading that carries less weight than <h1>. Use it for section titles or major headings.
• <h3> - A subheading that provides further division within a section. Ideal for sub-section titles.
• <h4> - A smaller header style suitable for subheadings or minor section titles.
• <h5> - An even smaller header style. Use it for less prominent headings or to provide additional structure within a section.
• <h6> - The smallest header style. Use it for minor headings or to differentiate content within a section.
• <p> - Is for the normal text in the section.

Inline styles

StepOne also offers styles for various inline elements such as links, emphasis, code snippets, and more. Here's how to use them:

• <a> - Use the <a> element for hyperlinks. Apply the .link class to style them as StepOne links.

  <p>Visit our <a href="#">website</a> to learn more.</p>
  

• <strong> or <b> - Use these elements to emphasize important text. The StepOne styles will make it stand out.

  <p><strong>Important:</strong> Please read the instructions carefully before proceeding.</p>
  

• <em> or <i> - Use these elements to italicize text. The StepOne styles will add emphasis.

  <p><em>Note:</em> This feature is only available for premium users.</p>
  

• <code> - Use the <code> element to display code snippets. The StepOne styles will format it accordingly.

  <p>To install the package, use the following command: <code>npm install stepone</code>.</p>
  

These are some of the core typography elements provided by StepOne. By utilizing these styles, you can create visually appealing and well-structured content on your website. Feel free to explore the StepOne documentation for more detailed information and additional typography options.