QBanner Component

Requirements

TypePath / VersionPurposeOptional
Vue versionVue 3Composition APINo
Styles../../assets/main.cssCSS VariablesYes
Functions../../use/uuidAssign ids to itemsNo
Components../../components/Layout/Flex/QFlexContainer/LayoutingNo
Components../../components/Layout/Flex/QFlexColumn/LayoutingNo

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

Template Slot: 'column-left'

Template Slot: 'column-right'

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.

Template Slot: 'column-left'

Template Slot: 'column-right'

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>