Add paragraph classes 1-3 to codebase

[JessicaLucindaCheng]

Overview

As developers, we use reusable SCSS classes for styling Hack for LA webpages. For this issue, we will add the paragraph classes 1-3 defined in the Design System to our codebase.

Note: We will not be writing classes for paragraph classes 4-5 because the font size is illegible and should not be used on the website.

Paragraph Classes under Typography in the Design System in Figma

Action Items

• Locate the Paragraphs section under Typography in the Design System in Figma to see how the paragraph classes are defined.
• Look at the following SCSS files to see how title classes were implemented; paragraph classes should be implemented similarly.
  • _sass/variables/_typography.scss
  • _sass/elements/_typography.scss
• Based on how each paragraph class is defined in Figma, add SCSS paragraph classes 1-3 to _sass/elements/_typography.scss
  • You may also need to define some variables in _sass/variables/_typography.scss
• Update paragraph definitions in Figma (if needed) to match code

Merge Team or Technical Leads

Once the pull request associated with this issue is approved and merged, please update the following:

• Edit issue Changing text size for Getting Started page #2656 by
  • Checking off the dependency for this issue
  • Moving issue Changing text size for Getting Started page #2656 into the New Issue Approval column and removing the Dependency label
• Edit issue Create new privacy policy page #2555 by
  • Checking off the dependency for this issue
  • Moving issue Create new privacy policy page #2555 into the In Progress column, removing the Dependency label, and assigning JessicaLucindaCheng to the issue. (Note: I, Jessica, was working on issue Create new privacy policy page #2555 prior to this one and needed the classes from this issue in order to continue work on issue Create new privacy policy page #2555. So, I had to stop work on issue Create new privacy policy page #2555 and complete this issue first. Once this issue is merged, I want to finish working on Create new privacy policy page #2555 since I have 65% of it done already.)

Resources/Instructions

• Design System in Figma
• _sass/variables/_typography.scss
• _sass/elements/_typography.scss
• SASS/SCSS Basics
• SASS/SCSS Documentation

[github-actions]

Hi @JessicaLucindaCheng.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing:
Size, Role

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards.
To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels