Follow Below setting for Category Filter and Pagination Style
Category Filter Style #
The Category Filter Styles section allows you to customize the look and feel of category filter buttons in your grid layout. You can control alignment, typography, spacing, colors for different states (normal, hover, active), borders, backgrounds, and more. These settings help you create visually consistent and user-friendly category filters.
| Control | Description |
|---|---|
| Alignment | Align category filter items to the left, center, or right. |
| Typography | Customize font family, size, weight, and letter spacing for category text. |
| Padding | Add inner spacing inside the category filter item container. |
| Margin | Add outer spacing around the category filter items. |
| Text Color (Normal) | Set the text color for category filters in their default state. |
| Background Color (Normal) | Set the background color for category filters in their default state. |
| Text Color (Hover) | Choose the text color when the category filter is hovered. |
| Background Color (Hover) | Choose the background color when the category filter is hovered. |
| Text Color (Active) | Set the text color for the active category filter. |
| Background Color (Active) | Set the background color for the active category filter. |
| Border Type | Select the type of border (solid, dashed, dotted, none). |
| Border Color (Hover) | Set the border color when hovering over a category filter. |
| Border Color (Active) | Set the border color for the active category filter. |
| Background Type | Choose between solid, gradient, or image background for category filters. |
| Border Radius | Add rounded corners to category filter items. |
Pagination Style #
The Pagination Styles section provides controls for styling pagination elements in your grid layout. You can set alignment, typography, spacing, size, and colors for normal, hover, and active states, along with borders and backgrounds, ensuring a cohesive design across navigation controls.
| Control | Description |
|---|---|
| Alignment | Align pagination numbers to the left, center, or right. |
| Typography | Adjust font family, size, weight, and letter spacing for pagination text. |
| Padding | Add inner spacing inside pagination number containers. |
| Margin | Add outer spacing around pagination numbers. |
| Number Width | Set a fixed width for pagination numbers for uniform sizing. |
| Text Color (Normal) | Set the text color for pagination numbers in their default state. |
| Background Color (Normal) | Set the background color for pagination numbers in their default state. |
| Text Color (Hover) | Choose the text color when hovering over pagination numbers. |
| Background Color (Hover) | Choose the background color when hovering over pagination numbers. |
| Text Color (Active) | Set the text color for the active pagination number. |
| Background Color (Active) | Set the background color for the active pagination number. |
| Border Type | Select the type of border (solid, dashed, dotted, none). |
| Border Color (Hover) | Set the border color when hovering over pagination numbers. |
| Border Color (Active) | Set the border color for the active pagination number. |
| Border Radius | Add rounded corners to pagination number containers. |
