object overlay

Object Overlay positions content relative to a container element. It provides a flexible way to place content in 9 different positions (top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, bottom-right) and supports responsive behavior. Key features:

• Flexible positioning: Position content in 9 different locations relative to a container
• Responsive behavior: Define different positions, margins, and gradients for different breakpoints
• Gradient support: Apply gradients to enhance visibility of overlaid content
• Spacing control: Adjust margin and padding around positioned content

• Use clear, high-contrast colors for overlaid content to ensure readability
• Consider the responsive behavior of your overlay at different screen sizes
• When overlaying text on images, use gradients to improve legibility
• Keep positioned content concise and focused
• Test your implementation across different devices and screen sizes

Object Overlay consists of two main parts:

1. Container: The base element that the content will be positioned relative to
2. Content: The element that will be positioned according to the specified position

These parts are exposed as slots in the component, allowing you to place any content within them.

Development responsibilities

When using this component, here's what you are responsible for::

• Ensure sufficient color contrast between the overlay content and its background
• If using gradients, verify they don't reduce text legibility
• When positioning text over images, ensure the text remains readable
• For interactive elements within the overlay, maintain proper focus management
• Consider using ARIA attributes when appropriate for complex overlay implementations
• Check that positioning is correct and doesn't obscure important elements
• Confirm the content is not used for layouts or complex positioning

Basic usage

Object Overlay allows you to position content in 9 different positions relative to a container.

<CdrObjectOverlay position="center-center">
  <template #container>
    <img src="https://placehold.co/600x400" width="100%" height="100%" alt="Background image" style="display: block"/>
  </template>
  <template #content>
    <div style="background-color: #fff; padding: 20px">
      Centered Content
    </div>
  </template>
</CdrObjectOverlay>

Responsive positioning

You can specify different positions for different breakpoints using an object.

<CdrObjectOverlay :position="{ xs: 'center-center', lg: 'bottom-center' }" :margin="['zero', 'eighth-x']">
  <template #container>
    <img src="https://placehold.co/600x400" width="100%" height="100%" alt="Background image" style="display: block"/>
  </template>
  <template #content>
    <div style="background-color: #fff; padding: 20px">
      Positioned Content
    </div>
  </template>
</CdrObjectOverlay>

With gradient and responsive margins

Apply gradients to the container and specify different margins for different breakpoints.

<CdrObjectOverlay 
  position="bottom-left" 
  :margin="{ xs: 'zero', lg: ['half-x', 'four-x'] }" 
  :gradient="{ xs: 'to-top', lg: 'to-right' }"
>
  <template #container>
    <img src="https://placehold.co/600x400" width="100%" height="100%" alt="Background image" style="display: block"/>
  </template>
  <template #content>
    <div style="background-color: #fff; padding: 20px">
      Positioned Content with Gradient
    </div>
  </template>
</CdrObjectOverlay>

With padding

Apply padding to the positioned content.

<CdrObjectOverlay position="center-center" :padding="['half-x', 'one-x']">
  <template #container>
    <img src="https://placehold.co/600x400" width="100%" height="100%" alt="Background image" style="display: block"/>
  </template>
  <template #content>
    <div style="background-color: rgba(255, 255, 255, 0.8)">
      Content with Padding
    </div>
  </template>
</CdrObjectOverlay>

When using CdrObjectOverlay in a TypeScript application, we recommend importing the ObjectOverlay interface from the library. This allows typed options to pass to the component.

ParentComponent.vue

<script setup lang="ts">
import {
  CdrObjectOverlay,
  type ObjectOverlay
} from '@rei/cedar'

const objectOverlayExample: ObjectOverlay = {
  position: 'left-top',
  margin: 'half-x',
  withGradient: true
};

</script>

<template>
  <main>
    <CdrSurface v-bind="surfaceExample">
      <CdrObjectOverlay v-bind="objectOverlayExample">
        <template #container>
          <img src="img.png" alt="placeholder image" />
        </template>
        <template #content>
          Content to be positioned
        </template>
      </CdrObjectOverlay>
    </CdrSurface>
  </main>
</template>