Banner.vue Component

Banner Component

📁 Location

src/components/AccountPages/Banner.vue

🔍 Overview

• The Banner component displays a reusable and responsive top or side banner, designed for and best paired with form-related pages like Log In, Sign Up, Forgot Password, and School Form.

Key Features

• Responsive Layout: Adjusts layout automatically based on screen size using a mobile-first approach.
  • Top, Row-based banner on smaller viewports (mobile, tablet)
  • Side, columnar banner on large screens (desktops)
• Customizable via props
  • (background color, SVG curve color, decorative images, layout spacing)
• Reusable Across Pages: Works well with form layouts, especially grid based designs for finer control.

❗️ Note: The banner does not control the layout of form elements. Instead, it complements responsive form layouts such as grid or flex based structures.

🗂️ Table of Contents

• Props
  • "Tall" vs "Wide" Images
  • Complete Props Example
• Responsive Behavior
• Customization Add Props or Images
• Integration Example Banner & Form Layout
  • Demo
• Summary

---

🧩 Props

Prop	Type	Default / Required	Purpose	Example Usage
CarlImgPath	String	Optional	Path to image (e.g., Carl mascot)	<Banner :CarlImgPath="'/assets/images/LoginImg/logo-icon.svg'" />
isImageWide	Boolean	true (Optional)	Indicates if Carl image is wide (width > height). If false, Banner adjusts to better fit "tall" Carl images.	<Banner :isImageWide="false" />
bgColor	String	Optional	Background color of the banner (hex, rgba, or named color)	<Banner bgColor="#f5bc8d" />
curveColor	String	Optional	Color of the SVG curves used for decoration (A matching SVG curve, using the same color, is added at the bottom for columnar form layouts)	<Banner curveColor="rgba(100, 40, 55, 0.8)" />
isPageShort	Boolean	false (Optional)	If true, adjusts layout for short pages/content (e.g., School Form) (Reduces spacing and sizes)	<Banner :isPageShort="showSchoolForm" />

"Tall" vs "Wide" Images

• A wide image has a landscape orientation, while a tall image has a portrait orientation.
• isImageWide ensures the Carl image is contained within Banner.

Type	Example
"Tall" Image 200x256 (height > width)
"Wide" Image 200x129 (width > height)

Complete Props Example

<Banner 
    id="login-banner"
    :CarlImgPath="'/assets/images/LoginImg/logo-icon.svg'" 
    bgColor="#f5bc8d"
    curveColor="#f8cba6"
    :isPageShort="showSchoolForm"
/>

• For the sake of consistency, the above example uses hex string values, but you can also use a combination of rgb(), rgba(), or standard CSS named colors like 'blue'.

📱 ↔ 💻 Responsive Behavior

• This component uses a checkDeviceType() composable to detect the screen size.
  • It exposes two flags: isMobile and isTablet, which are used to apply responsive class bindings.
  • View composable: src/Utilities/checkDeviceType.js

// Desktop: `!isMobile && !isTablet`  
// Tablet: `isTablet`  
// Mobile: `isMobile`

⚙️ Customization: Add Props or Images

• You can extend the Banner component by:
  • Adding new props (e.g., a second image)
  • Updating the layout/CSS styling
  • Using tools like GetWaves.io to generate new SVG wave graphics

📦 Integration Example: Banner + Form Layout

This example shows how to use the Banner alongside a responsive grid based form layout, such as an email subscription form.

1. Import Banner component and checkDeviceType:

<script setup>
/* * * * * * SubscriptionForm.vue * * * * * */

// NOTE: Assumes SubscriptionForm.vue exists in src/pages/SubscriptionForm/
import Banner from "../../components/AccountPages/Banner.vue";
import { useDeviceType } from "../../Utilities/checkDeviceType";

const { isMobile, isTablet } = useDeviceType();
</script>

2. Add responsive wrapper & form:

• Use #subscription-container as the wrapper
  
• Use #email-banner as the banner
  
• Use #email-form-container as the form

<template>
    <!-- * * * * * SubscriptionForm.vue * * * * * -->
    <div 
        id="subscription-container"
        :class="[
            !isTablet && !isMobile ? 'px-20' : '',
            isTablet ? 'px-10' : '',
            isMobile ? 'px-5' : ''
        ]"
    >
        <!-- NOTE: This form has only one input and a submit button, so isPageShort is set to true for simplicity -->
        <Banner
            id="email-banner"
            :CarlImgPath="'/assets/images/LoginImg/logo-icon.svg'"
            bgColor="#f5bc8d"
            curveColor="#f8cba6"
            :isPageShort="true"
        />
        <div 
            id="email-form-container"
            class="pt-[20px] pb-[20px] mb-[40px] mt-[40px] text-center"
            :class="[
                !isTablet && !isMobile ? 'mt-[0px] mb-[0px]' : '',
            ]"
        >
            <h1 class="text-[#151E22] mobile:text-[28px] text-[35px]">
                Subscribe to our weekly newsletter!
            </h1>
            <form 
                ref="emailSubForm" 
                @submit="handleSubscription"
                method="post"
                class="w-[80%] ml-[10%] mt-[20px] pt-[20px] pb-[20px]"
            >
                <!-- SAMPLE EMAIL FIELD -->
                <div>
                    <label
                        class="block text-[#0C0D0D] font-semibold"
                        for="email"
                    >
                        Email Address
                    </label>
                    <input
                        type="email"
                        class="w-full outline-none border border-black h-[48px] px-4 rounded-[8px]"
                        id="email"
                        name="email"
                        placeholder="Enter your email address"
                        autocomplete="email"
                    />
                </div>
                <!-- SUBMIT BUTTON -->
                <div class="mt-[40px] mb-[40px] w-full">
                    <button
                        type="submit"
                        class="h-[55px] w-[280px] py-3 font-bold text-black
                               bg-[#FE892A] hover:bg-[#ff8d33] 
                               rounded-[8px] border-2 border-black shadow-[4px_4px_0px_black]"
                    >
                        Subscribe!
                    </button>
                </div>
            </form>
        </div>
    </div>
</template>

3. Add Responsive Grid CSS Media Queries (Mobile-first to Desktop):

<style scoped>
/* * * * * * SubscriptionForm.vue * * * * * /

/* * * * * Default: Mobile view (max-width: 639px) * * * * */
label {
    margin-bottom: 5px;
    text-align: left;
    width: 80%;
}

input {
    margin-bottom: 20px;
}

/* * * * * Large Devices (≥1025px) * * * * */
@media only screen and (min-width: 1025px) {

#subscription-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}

#email-banner {
    grid-area: 1 / span 1;
    height: 100%;
}

#email-form-container {
    margin-top: 0px;
    margin-bottom: 0px; 
    grid-area: 1 / span 2;
    padding-bottom: 50px; 
}

}
</style>

4. For UI consistency, import Header and Footer components:

<script setup>
/* * * * * * SubscriptionForm.vue * * * * * */

// NOTE: Assumes SubscriptionForm.vue exists in src/pages/SubscriptionForm/

import Banner from "../../components/AccountPages/Banner.vue";
import Header from "../../components/Header/Header.vue";
import Footer from "../../components/Footer/Footer.vue";

import { useDeviceType } from "../../Utilities/checkDeviceType";
const { isMobile, isTablet } = useDeviceType();

</script>

5. Update your page <template> to include Header and Footer:

<template>
    <!-- * * * * * SubscriptionForm.vue * * * * * -->
    <div 
        :class="[
            'relative', 
            !isTablet && !isMobile ? 'px-14' : '',
            isTablet ? 'px-6' : '',
            isMobile ? 'px-8' : ''
        ]" 
        ref="content"
    >
    <Header :logoPath="'/assets/images/header/header-logo-2.png'" />
    </div>
    <!-- NOTE: #subscription-container starts here (see STEP 2 above) -->
    <Footer />
</template>

🎨 Demo

Visual demo for the final email subscription form example:

Viewport	Screenshot
Mobile / Small
Tablet / Medium
Desktop / Large

📋 Summary

• Banner.vue provides a flexible, mobile-first decorative layout element for forms.
• Easily extendable by adding new props and <img>.
• Pairs well with grid based responsive forms, but does not manage form layout alone.