Article Banner
Synopsis: The Article Banner component is a component that allows authors to create anchor links that take the user to pre-defined areas in an article. This component works in combination with anchor tags within the article, of which the author must also configure.
Content Fields:
Background Image, Banner Label, Links (Label, Path)
Options:
Theme: Light or Dark Mode
Background Position: Left, Right, Center
Recommended Image Specifications: Recommend a 2400 x 1200 banner type image.
Usage: Article page.
Note: This should be used as an example only. There will be additional requirements related to each individual component usage and page design, such as font treatments, padding and margin requirements, ADA compliance etc, so please use the below examples for reference only to demonstrate core function.
Scenario 1
Light Mode
Ingredients: 1 Container, 1 Article Banner.
This use case involves an outside container set to full width. The article banner is of light theme (white text).
The links here can be configured to go to specified area of the article in the same page using anchor tag or open a new link in another page.
Scenario 2
Dark Mode
Ingredients: 1 Container, 1 Article Banner.
This use case involves an outside container set to full width. The article banner is of dark theme (black text)
The links here can be configured to go to specified area of the article in the same page using anchor tag or open a new link in another page.