How to create a Gift card screen | Ionic Design Kit

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Gift Card Screen is a valuable feature in e-commerce, retail, and lifestyle apps, enabling users to purchase or send digital gift vouchers to friends, family, or colleagues. A well-designed interface includes amount selection, gift card themes, recipient name and email fields, personalized message input, and secure payment options. Features like scheduled delivery and preview modes can enhance the gifting experience and boost user satisfaction.

This guide will walk you through the steps to design and implement a Gift Card Screen using the Ionic Design Kit. By leveraging its flexible UI components and the Ionic Framework, you can create a smooth, secure, and delightful gifting interface that makes sending digital gift cards fast and easy.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start gift-card blank --type=react

3. Get inside the project directory

cd gift-card

4. Create a Gift card page

Create page GiftCard.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const GiftCard: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default GiftCard;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Select the layout structure

For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.

<IonPage>
  <IonHeader>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

6. Define state and logic

Define the functional component GiftCard and use React hooks to manage state. useState stores the amount and the date, while useRef holds a reference to the modal. Functions increase and decrease change the amount value. useEffect automatically dismisses the modal when the date changes.

const modalRef = useRef<HTMLIonModalElement>(null);
const [amount, setAmount] = useState<number>(35);
const [date, setDate] = useState("2025-09-01");
const increase = () => setAmount((prev) => prev + 5);
const decrease = () => setAmount((prev) => (prev > 5 ? prev - 5 : prev));

useEffect(() => {
    if (modalRef.current) {
        modalRef.current.dismiss();
    }
}, [date]);

Wrap everything inside IonPage, the main container for a view. Add IonHeader for the top bar. Inside it, use IonToolbar as a container for buttons and titles. IonButtons slot="start" places controls on the left, and IonBackButton provides navigation back to the previous page.IonTitle displays the page title.

<IonHeader>
    <IonToolbar>
        <IonButtons slot="start" className="ion-padding-start">
            <IonBackButton defaultHref="/" text="" icon={arrowBack} />
        </IonButtons>
        <IonTitle>Digital gift card</IonTitle>
    </IonToolbar>
</IonHeader>

This concludes our work with IonHeader, and the following sections will cover working with IonContent.

8. Build the content section with a card

Use IonContent to hold the main scrollable area of the page. Inside, add IonCard to display a card with an image. IonImg shows the gift image with a source path and alt text.

<IonContent>
    <IonCard>
        <IonImg src="gift.jpg" alt="Gift" />
    </IonCard>
</IonContent>

9. Implement amount controls

Insert a <div> styled with flexbox for horizontal alignment. Place IonButton components with attributes like fill="solid", shape="round", and color="light" to create circular buttons. Inside each button, IonIcon slot="icon-only" renders icons without text. IonLabel displays a text label and the current amount.

<IonContent>
    ...
    <div
        style={{
            display: "flex",
            alignItems: "end",
            justifyContent: "center",
            gap: "32px",
            textAlign: "center",
            marginBottom: "18px",
        }}
    >
        <IonButton
            fill="solid"
            shape="round"
            color="light"
            onClick={decrease}
        >
            <IonIcon slot="icon-only" icon={remove} />
        </IonButton>
        <IonLabel>
            <p>Amount</p>
            <h1>${amount}</h1>
        </IonLabel>
        <IonButton
            fill="solid"
            shape="round"
            color="light"
            onClick={increase}
        >
            <IonIcon slot="icon-only" icon={add} />
        </IonButton>
    </div>
</IonContent>

10. Add a date picker

Add IonItem to group label and controls. IonLabel position="stacked" stacks the heading and description vertically. A clear IonButton displays the selected date. IonModal opens when triggered by the button. It has attributes breakpoints and initialBreakpoint to control modal sizes. Inside, IonDatetime shows a calendar with attributes like presentation="date", value for the selected date, and locale="en-GB". The onIonChange handler updates the date state.

<IonContent>
    ...
    <IonItem>
        <IonLabel position="stacked">
            <h2>Date:</h2>
            <p className="ion-text-secondary">Send date</p>
        </IonLabel>
        <IonButton fill="clear" color="dark" id="gift-date">
            {new Date(date).toLocaleDateString("en-GB")}
        </IonButton>
        <IonModal
            ref={modalRef}
            trigger="gift-date"
            breakpoints={[0, 0.5]}
            initialBreakpoint={0.5}
        >
            <IonDatetime
                presentation="date"
                value={date}
                locale="en-GB"
                size="cover"
                onIonChange={(e) => setDate(e.detail.value as string)}
            />
        </IonModal>
    </IonItem>
</IonContent>

11. Create sender and receiver inputs

Use IonItem to group input fields. Each has IonLabel position="stacked" for the title and description. IonInput provides editable text fields with predefined values for sender and receiver names.

<IonContent>
    ...
    <IonItem>
        <IonLabel position="stacked">
            <h2>From:</h2>
            <p className="ion-text-secondary">Name</p>
        </IonLabel>
        <IonInput value="Miller Johnson" />
    </IonItem>
    <IonItem>
        <IonLabel position="stacked">
            <h2>To:</h2>
            <p className="ion-text-secondary">Name</p>
        </IonLabel>
        <IonInput value="Michael Smith" />
    </IonItem>
</IonContent>

At the bottom, IonFooter creates a persistent section. Inside, IonItem with lines="none" removes dividers. IonLabel shows the subtotal text, and IonText slot="end" aligns the amount to the right. A block-level IonButton with horizontal padding displays the action 'Review order'.

<IonContent>
    ...
</IonContent>
<IonFooter className="ion-padding-bottom">
    <IonItem lines="none">
        <IonLabel>Subtotal:</IonLabel>
        <IonText slot="end">${amount}</IonText>
    </IonItem>
    <IonButton className="ion-padding-horizontal" expand="block">
        Review order
    </IonButton>
</IonFooter>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!