Create Component and Refactor HTML for "In-Kind" text on Donate page

[roslynwythe]

Dependency

• Implement Redesigned Donate Page (mobile and desktop) #3983

Overview

As developers we need to componentize donation elements which appear on multiple pages in the site, in order to present a consistent appearance and efficiently reuse code. In this issue, the text on the Donate page below "Provide In-Kind Software & Services" will be componentized.

Details

• Please refer to the screenshot under Resources. The paragraphs depicted in the screenshot appear beneath the header "Provide In-Kind Software & Services" on the Donate page, and the HTML is contained in _includes/donate-card.html.
• To create a reusable component, the paragraphs below the heading (but not the heading) will be moved to a new component

Action Items

• Open the current file _includes/donate-card.html. Create a new component file _includes/donation/in-kind.html then remove the appropriate <p> elements from the current file and add them to the new file. Note that the heading "Provide In-Kind Software & Services" will not be moved into the new component; instead it should be retained in the existing files.
• Update _includes/donate-card.html to reference the new component file using the liquid {% include <filename> %} syntax. Note that 'filename' is relative to the _includes folder.

Merge Team

• In Epic Epic: Create reusable donation components and integrate with Donate, Join Us and About pages #4492, check off the dependency under "Creating/Integrating New Issues". If all of the dependencies under that heading have been merged, then release dependencies on all the issues listed under "Clean Up".

Resources/Instructions

Screenshot of the new component elements

• HfLA Donate Page: webpage and html
• Donate Card - Donate Page version

[github-actions]

Hi @roslynwythe.

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

NOTE: Please ignore the adding proper labels comment if you do not have 'write' access to this directory.

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 Prioritization" label once it is ready for prioritization.

Additional Resources:

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