Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[35169] Banner: Remove Sketch and Adobe XD references (en) #851

Open
wants to merge 3 commits into
base: vNext
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions en/components/banner.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
title: Banner - Design System Component
_description: The Banner Component is used to show an interactive information message or notification in a prominent way.
_keywords: Design Systems, Design Systems UX, UI kit, Sketch, Ignite UI for Angular, Sketch to Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
---

# Banner

Use the Banner Component to display a prominent message and optionally actions related to it. The Banner is visually identical to the [Ignite UI for Angular Banner Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner)
Use the Banner component to display a prominent message with optional actions. The Banner is visually identical to the [Ignite UI for Angular Banner Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner)

## Banner Demo

<img class="responsive-img" src="../images/banner_demo.png" srcset="../images/[email protected] 2x" />

## Message

The Banner's Message consists of an Icon and a Text field. It uses a smart layout in Sketch to let you hide the Icon by setting it to ~No Symbol, and a Stack in Adobe XD that takes care of the layout automatically as you add or delete components. In Figma, you can use the "Icon" boolean operation from the properties panel to show/hide the Icon.
The Banner's message section includes an Icon and a Text field. In Figma, you can toggle the Icon’s visibility using the Icon boolean operation from the properties panel.

<img class="responsive-img" src="../images/banner_message.png" srcset="../images/[email protected] 2x" />

## Actions

The Actions area contains two Button components by default. If you only need one or want to remove both of them, set them to ~No Symbol in Sketch and the smart layout will adjust everything. In Adobe XD you can achieve the same by deleting the unnecessary button layers and rely on the Stack applied to adjust the interface, but on top of that you can even add more actions or use different components by dragging them into the Actions area from the Libraries panel. In Figma, to manage the actions displayed in the Banner, you can choose which one to keep and hide the other from the layers panel or hide the entire actions container using the "Actions" boolean operation.
By default, the Actions section contains two Button components. In Figma, you can manage the displayed actions by keeping one button, hiding the other from the layers panel, or hiding the entire actions container using the Actions boolean operation.


<img class="responsive-img" src="../images/banner_actions.png" srcset="../images/[email protected] 2x" />
Expand Down
Loading