Search⌘ K
AI Features

Modifying the Home Page

Explore how to build and modify the home page of an attendance application using Ionic React components. This lesson guides you through adding images, card headers, subtitles, titles, and navigation links, helping you create a functional and styled landing page for your app.

We'll cover the following...

The first thing you should do is create the home page, as it is the app’s landing page. There will not be much content – just some text inside an IonCard.

The IonCard component

An IonCard is a component designed to wrap basic pieces of information. By default, a card has a gray border, rounded edges, and a subtle drop shadow. As with all Ionic components, its visual style will change slightly when rendered on an Android versus an iPhone.

Cards can be as simple or as complex as you want. The card envisioned for the home page will consist of an image of a classroom, followed by a card header having both a subtitle and title, and a ...