# Week 5 - Components

Objective:

# Objectives

Learn to create scalable and reusable components. Create a button and a card component. Publish your design system library to use its assets in your midterm project.

# Instructions

Understand component properties:: Choose a tutorial and understand component creations. how to plan component properties and functionality.
Create a Button Component:: In a new page called Button, create a button component that allows the following:

Show or hide the icon
Change the type of button between Primary, secondary or text
Change states on default, hover and clicked.
Advanced Bonus: changes colour in different modes (light and dark).

Create a card component: In a new page called Card, create a card for a movie listing to be used in your midterm project. The card should contain the following:

Movie Image: Ensure a 4:3 ratio
Movie Title
Movie description
Action Button to view details

Publish your Figma design system:

Use instructions from class or tutorial to publish your library.
Start a new midterm file in Figma.
Attach your library to the midterm file
Start dragging and using your assets in your file

# Submission

Figma Link in Brightspace assignment page: A link to your Figma file containing the design system components.