📄️ Boxed width container
The Boxed width container component is a basic component used to contain building blocks and third party integration that would otherwise appear full width.
📄️ HCP Login
HCP Login is a component that displays the functionality of the 'Gigya RaaS' block on any page. This component will display 'Login' and 'Register' when logged in and will display 'Logout' and 'Profile' when not.
📄️ Product Container
The Product container is made up of several configurable elements, allowing for a range of customisable layouts. Text, button positioning and background colour/image settings can all be configured to create a number of layout variations.
📄️ Product
Product is a component that displays the functionality of the 'EC-Cube' block on any page. This component will display product information that is configured within the component
📄️ Contact Us
Contact Us is a component that displays the functionality of the 'Bayer - Contact Us' block on any page. This component will display the contact information for all brands within two WYSIWYG editors as tables.
📄️ Modal
The Modal component is a customisable light box. When triggered, it will appear over the content on the rest of the page. The modal’s content can contain a combination of other components including; text, imagery, videos and buttons. Interactive elements such as forms, will require development.
📄️ Anchor links
Anchor links are another way to break the delivery into smaller more manageable sections beyond the use of sub-navigation. This features on the Product Detail page and enables users to quickly navigate their way down the page. The mobile function shifts the buttons into an accordion, that reveals content on click.
📄️ Google map
The Google map component is used to allow the user to feature Google maps on any page to show a singular location defined within the component. The information is displayed. The Google map component can be customised and styled as described in the Specification tab below.
📄️ Poll
The Poll component is used to allow the user to feature Polls on any page to display a questionnaire. The Poll component can be customised and styled as described in the Style Guide Manager tab below.
📄️ View Taxonomy filter
The View Taxonomy filter is used to render a filtered list of products to filter out content tagged by the selected taxonomy term.
📄️ Breadcrumbs
All pages, except the homepage, mandatorily display Breadcrumbs to facilitate orientation and navigation on the website. This is a standard that must be included on the top-left corner of every page, just below the primary navigation.
📄️ Links and buttons
Links and buttons should only be used for actions and as such the labels should clearly express the desired action. A number of components within the design system feature multiple link and button options for use in your designs.
📄️ Calendar
A Calendar picker facilitates inserting a date into a form field. The functionality for these should be developed at a brand level as their usage may vary. All form elements will require development.
📄️ Floating action buttons
**Floating action buttons** should be used sparingly and should be reserved for brand alerts or attributes that are required for context to inform cus
📄️ Image gallery
The **Image gallery** allows the user to browse through a collection of images and videos. Thumbnails are presented in a carousel, and the user can al
📄️ Input fields and dropdown menu
**Input fields** have multiple states that can be defined: Default, Active and Error. **Drop-down** menus also have hover states. Labels for each fiel
📄️ Other global components
There are a number of **global components** that can be used across the system within forms. The styling and functionality for these should be develo
📄️ Pagination
**Pagination** can be used to navigate through a number of pages within a content archive. The active page number is highlighted. The 'Back' and 'Next
📄️ Print buttons
The **Print button** can be paired with a webpage to print the full breadth of the page or with the detail of a component (product detail or content)
📄️ Filters
**Filters** can be used where there is a need to filter a portfolio of products or articles based on user preference. There are two types of filters;
📄️ Search results
The **Search results** page displays the results of a specific search, with the clickable section/content title and description below. All search res
📄️ Sitemap
The **Sitemap** page lists all pages featured in the main menu of your website. The sitemap list will use the brand typography styles set up in the S
📄️ Share
The **Share** **component** allows readers to share a web page via social media or email. By default, the social networks supported are Facebook, Twit
📄️ Social media links
**Social media icons** link the user to the brand’s social media pages.
📄️ Tables
**Tables** are used to allow the user to quickly contrast and/or compare information. By default, tables will not reorder columns and rows in mobile.
📄️ Text and bullets
**Text and bullets** are typographical styles and are covered more extensively elsewhere in this guide.
📄️ Tooltips
**Tooltips** contain information defining or explaining the purpose of an element or action. Tooltips should be accessible through all devices and the
📄️ Cookie consent
The **Cookie consent component** is used to allow the user to manage their cookie settings. The information is displayed in a table that is based on t
📄️ Technical Cookie List
The **One Trust Technical Cookie List component** is used to display the Technical Cookie List. This information is displayed in a table that is based