---
title: "Commonly used CSS classes for tabs"
canonical: "https://support.appfire.com/space/CT/1562509524/Commonly%20used%20CSS%20classes%20for%20tabs"
format: markdown
---
> Macro (aura-html)

<span style="color: #0e101a">Here are the top five CSS classes used in the </span><span style="color: #4a6ee0">[Deck of Cards](https://appfire.atlassian.net/wiki/spaces/CTFCSM/pages/1562607623)</span><span style="color: #0e101a"> macro:</span>

| **#** | **CSS Class** | **Description** | **Screenshot** |
| --- | --- | --- | --- |
| 1 | `.aui-tabs.horizontal-tabs` | Refers to the Deck of Cards macro when the **Tabs Location** parameter is set to **top **or **bottom**.<br>![image](media://7cff93a9-31d9-41e5-9bad-1ebd3c0cb521) | ![image](media://3aec82d5-3d12-44c2-9ee9-3a9877f2ac94) |
| 2 | `.aui-tabs.vertical-tabs` | Refers to the Deck of Cards macro when the **Tabs Location** parameter is set to **left **or **right**.<br>![image](media://ec0e9a27-a0fc-4d26-bada-fe65d25f461e) | ![image](media://d08892e5-ac07-4abe-9dc5-5edc184ed00a) |
| 3 | `.tabs-menu` | Refers to **all **the Card macros that are placed inside a Deck of Cards macro. | ![image](media://483fecb1-d53d-4005-95b9-045943a2b408) |
| 4 | `.menu-item` | Refers to **each **of the Card macros (except the selected tab) that are placed inside a Deck of Cards macro. | ![image](media://9f104527-fcff-42e2-8e73-93c2d75e6e44) |
| 5 | `.menu-item.active-tab` | Refers to the **active tab** that the user has selected. | ![image](media://41db9bc3-660d-4ddf-9c14-ff97b106a9e2) |