Examples of Tab component

Hi @chrisphillipsuc,

Use the Core Components Tabs as your base, then extend it to add an “icon” field per tab and hide the text on small screens. Out-of-the-box Tabs don’t ship with icons in the tab labels, but they’re designed to be extended exactly for cases like this: https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/tabs

References: 

• Core Tabs docs (features, accessibility, authoring): Tabs Component: https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/tabs

• Live examples of Tabs markup (great for inspecting DOM & classes you’ll extend): Core Components Example Library: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/tabs.html

• How to add fields / extend dialogs & models (pattern you’ll use for the icon field): community thread & general extension docs: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-tabs-component-how-to-add-an-extra-field/m-p/436815

• Children Editor notes (Tabs/Accordion/Carousel use this pattern): quick explainer: https://aemlab.blogspot.com/2022/09/aemaacs-core-components-children-editor.html