# ε Overlay

Element: Used as a placeholder container on top of a Graphic to give additional functionality (icon, banner, sash, adoption). There are three overlay locations within a Graphic: Top, Center, Bottom each with their own unique display types.

[Styleguide Link](/core/overview/graphic/overlay.md)

* Parent: [Graphic](/core/overview/graphic.md)
* Child: Overlay - [Icon](/core/overview/graphic/overlay/ol-icon.md), [Banner](/core/overview/graphic/overlay/ol-banner.md), [Sash](/core/overview/graphic/overlay/ol-sash.md), [AdaptIcon](/core/overview/graphic/overlay/ol-adapticon.md), [Button](/core/overview/graphic/overlay/ol-button.md)

## Properties

### Location

We break the overlay into seven distinct areas of the graphic and organize the possibilities within each of those collections.

<figure><img src="/files/a7EGphJaeaKp9s2n92qH" alt=""><figcaption></figcaption></figure>

* **Top Left:** Docked to the top left corner of the Graphic
* **Top Center:** Docked to the top left & right corners of the Graphic
* **Top Right:** Docked to the top right corner of the Graphic
* **Center-Center:** Floating in the vertical & horizontal center of the Graphic
* **Bottom Left:** Docked to the bottom left corner of the Graphic
* **Bottom Center:** Docked to the bottom left & right corners of the Graphic
* **Bottom Right:** Docked to the bottom right corner of the Graphic

### Type

Each of the types is further broken down into their like collections at the Primitive level where we control the horizontal location of the objects contained within the Overlay.

<figure><img src="/files/dj2JgQ2i1xUl3xxnSOD7" alt=""><figcaption></figcaption></figure>

* **Icon:** Normally used as actionable or informational areas that overlay (float above) the Graphic. A good example of an actionable icon would be the activity of Favoriting or Liking an image.
* **Button:** Used as the primary CTA "Call to Action" for the Graphic/Illustration it is overlaying.
* **Headline:** Used to provide words on top of a graphic or illustration.
* **Banner:** Primarily for information a banner can stretch the width of the Graphic or be a notch in the Graphic.
* **Sash:** A sash is a triangular piece that drapes across the corner of the graphic. This draws a bit more attention to the visual being displayed inside of the sash.
* **AdaptIcon:** Used to give context to a Graphic, possibly attributing it to a location represented by the AdaptIcon.
* **Avatar:** Used to attribute a Graphic to a person, pictured in the Avatar with an optional name beside it.
* **Stepper:** When multiple graphics/illustrations are represented in a single Graphic instance we show the content stepper indicator.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://able.bucca.com/core/overview/graphic/overlay.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.