🎨 Create Reusable Icons and text components

[IanOdhiambo9]

Create Reusable Icons and text components

---

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

---

Summary

As a user I want a a component I can reuse across the app to visualise similar text and icons

Description

As seen on the designs (link below), this component contains the following:

1. An icon / image
2. A title
3. A paragraph

The component needs to appear as shown below (link to icons to be provided)

Your assignment is to implement the component to appear as above.

Please take note of all the design features

Link to full design:

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/63e63506-4ea3-4d02-af28-f7cf148b47d9

mobile 

https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/screen/0efb593f-dc28-4e6d-86f3-098699455ad4

Technical Analysis

This component will be created in libs/features/components/cards

The component will be called elewa-vertical-icon-and-text

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 50 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The code is isolated to the libs/page/home package, unless a justified reason is specified.
5. The component is aligned using CSS flex
6. The design is responsive for screen, tablet and phone
7. The image renders fast and has multiple srcsets

[Eddahkarambu]

@JohnstoneDev & I are working on this.

[nziokikevin]

Working on this with @Dcolonel6