New
<section class="banner" role="dialog" id="banner">
<div class="banner__content">
<div class="banner__text">
<h2 class="banner__text-title">Title text goes here</h2>
<p class="banner__text-description">Description text goes here</p>
<a class="banner__text-action" href="#">Click here</a>
</div>
<button data-close-target="banner" class="js-close-target banner__btn-close">Close</button>
</div>
</section>
Although the element is named as banner, following what was defined in the construction of the style, its name in the HTML scope would be better defined as "dialog", although this does not affect the development in any way, only the semantic issue.
To do so, we will follow the recommendation defined in https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role.
Although it is not strictly necessary, and is not part of the demonstrated code, the inclusion of the aria-labelledby and aria-describedby attributes is recommended.
The "data-close-target" attribute defined
in the button tag is related to the banner ID. Once the button is clicked, through the project's utility javascript, it is identified that the banner should be removed.
The CSS was created using the "Block, Element, Modifier" (BEM)
directive for creating classes.
- .banner - This is the main class of the banner
- .banner__content - This is the container for the banner elements with width restrictions according to the scenario
- .banner__text - This is
the container for all the elements that make up the textual part of the banner.
- .banner__text-title - Banner title.
- .banner__text-description - Banner description.
- .banner__text-action - Represents the banner action described
as a link.
Depending on the context, some elements within the element with the banner__text class should be removed.
The element with the banner__text-title class should be an anchor tag in the scenarios in which it is requested.
To reinforce accessibility, the click element, responsible for closing the banner, should always be a button tag and CSS is reinforcing this.
It is preferable to copy the codes of the banners assembled below.
Theme modifiers are capable of changing the colors, icons and other visual representations of the element, they are:
Important:
The "success" modifier can only be used when the banner is in inline form.
Theme modifiers are capable of changing the colors, icons and other visual representations of the element, they are:
Important:
Banners considered global can only exist once on the page, unlike inline banners.
Important:
The sticky position is recommended, but some problems may appear depending on the HTML structure. Use the fixed position instead and a javascript code will make the necessary modifications.
Global banners can be better reproduced outside the page´s container.
Global banners can be better reproduced outside the page´s container.