# Banner ### Section overview The Banner section is a versatile component that displays a background image or video with overlaid content. It provides a highly customizable hero area that can be used to highlight promotions, welcome messages, or important announcements. #### Common use cases * Homepage hero banners to showcase new collections or products * Promotional announcements with countdown timers or discount codes * Newsletter signup areas with a compelling background image * Category or collection introduction banners #### Usage tips * Use high-quality images that contrast well with your text overlay for better readability * Keep text content concise and focused on a single call-to-action * For mobile, consider using a dedicated mobile image with different proportions * When using video backgrounds, keep them short and ensure they don't distract from the main message * Use the color scheme settings to ensure text remains readable against your background image ### Section settings | Setting | Description | | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Url | The link for the entire banner when clicked | | Image background desktop | The background image shown on desktop devices | | Image background mobile | The background image shown on mobile devices | | Video background | Optional video to display in the banner background | | Show image | Controls whether to display the background image | | Show entire image | Shows the full image rather than cropping to fill available space | | Show video background mobile | Controls whether video background displays on mobile devices | | Y spacing | Sets the vertical height of the banner | | Color scheme | The color palette applied to the background | | Color text | Controls the text color throughout the banner | | Color border | Sets the color of any borders used | | Enable gradient | Adds a gradient overlay to improve text visibility | | Enable background overlay | Adds a background to text content for better readability | | Border position | Controls where border styling appears | | Y alignment | Sets vertical alignment of content within the banner | | X alignment | Sets horizontal alignment of content within the banner | | Enable margin | Adds horizontal margin to the banner content | | Enable border margin | Adds margin around borders | | Enable max width | Limits the width of text content for better readability | | Visibility | Controls whether banner appears on desktop, mobile, or both | | Account visibility | Controls when the banner is displayed based on customer login status (always, logged out, logged in but not approved, logged in and approved). Available in theme version 2.0.1 or later. | ### Block settings #### Heading Displays a prominent headline within the banner. * Block limit: 1 | Setting | Description | | ------- | --------------------------- | | Content | The heading text to display | #### Image Adds an image element within the banner content area. * Block limit: 3 | Setting | Description | | ------------ | ------------------------------------------ | | Image | The image to display | | Image height | Controls the height of the image in pixels | #### Content Adds rich text content to the banner. * Block limit: 3 | Setting | Description | | ------- | ---------------------------- | | Content | Rich text content to display | #### Buttons Adds up to two call-to-action buttons. * Block limit: 1 | Setting | Description | | ---------------------- | ------------------------------ | | Button label | Text for the primary button | | Button url | Link for the primary button | | Color button | Style for the primary button | | Secondary button label | Text for the secondary button | | Secondary button url | Link for the secondary button | | Secondary color button | Style for the secondary button | #### Newsletter Adds an email signup form within the banner. * Block limit: 1 | Setting | Description | | ------------ | ------------------------------------------ | | Content | Descriptive text above the signup form | | Button label | Text for the subscribe button | | Disclaimer | Optional legal text or privacy information | | Success | Message shown after successful signup | #### Countdown Displays a countdown timer to a specific date. * Block limit: 1 | Setting | Description | | -------------- | --------------------------------------- | | Countdown date | The target date for the countdown | | Content | Text content to accompany the countdown | #### Discount Displays a discount code that customers can copy. * Block limit: 1 | Setting | Description | | ------- | ---------------------------- | | Code | The discount code to display | #### Search Adds a search input field within the banner. * Block limit: 1 --- # 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://help.brickspacelab.com/keystone/sections/content-and-media/banner.md?ask= ``` 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.