QBanner Component

Requirements

Type	Path / Version	Purpose	Optional
Vue version	Vue 3	Composition API	No
Styles	../../assets/main.css	CSS Variables	Yes
Functions	../../use/uuid	Assign ids to items	No
Components	../../components/Layout/Flex/QFlexContainer/	Layouting	No
Components	../../components/Layout/Flex/QFlexColumn/	Layouting	No

Usage

Import the following component/s:

import QBanner from '../../components/UI/Sections/QBanner.vue'

Basic usage

A banner is meant to be used on top of the page to highlight important content. It can be used for Call to Action or just informative purposes.

Responsiveness

This component is responsive by default (media query sm | < 800px). This behavior cannot be overwritten from outside of the component.

The banner is composed of:

A background image assigned with background-image
Two columns which can be populated with slots

Example

<q-banner background-image="../../public/forest.jpg">
  <template v-slot:column-left >
    <p>Template Slot: 'column-left'</p>
  </template>
  <template v-slot:column-right >
    <p>Template Slot: 'column-right'</p>
  </template>
</q-banner>

Image prallax

Create a prallax scrolling effect by adding prallax to the component. Note that the image is not rescaled automatically.

Example

<q-banner :prallax="true" background-image="../../public/forest.jpg">
  <template v-slot:column-left >
    <p>Template Slot: 'column-left'</p>
  </template>
  <template v-slot:column-right >
    <p>Template Slot: 'column-right'</p>
  </template>
</q-banner>

Reverse on mobile (TBD)

Must be implemented inside of the flex container

Full component's code

QBanner

<template>
  <section
    class="q-banner-wrapper"
    :class="{
      'q-banner-prallax': prallax,
      'q-banner-reverse-sm': smReverseCols,
    }"
    :style="`background-image: url('${backgroundImage}');`"
  >
    <q-flex-container :fluid="true">
      <q-flex-column :cols="6" :smCols="12">
        <slot name="column-left" />
      </q-flex-column>
      <q-flex-column :cols="6" :smCols="12">
        <slot name="column-right" />
      </q-flex-column>
    </q-flex-container>
  </section>
</template>

<script>
import QFlexContainer from "../../Layout/Flex/QFlexContainer.vue";
import QFlexColumn from "../../Layout/Flex/QFlexColumn.vue";

export default {
  components: {
    QFlexContainer,
    QFlexColumn,
  },
  props: {
    smReverseCols: {
      type: Boolean,
      default: false,
    },
    prallax: {
      type: Boolean,
      default: false,
    },
    backgroundImage: {
      type: String,
    },
  },
};
</script>

<style scoped>
.q-banner-wrapper {
  background-color: var(--background-color-primary);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.q-banner-prallax {
  background-attachment: fixed;
}
</style>

# QBanner Component

# Requirements

# Usage

# Basic usage

# Image prallax

# Reverse on mobile (TBD)

# Full component's code

# QBanner