### Description
Present SC Categories as a primary navigation. The SC Category Buttons widget provides flexibility to control how categories are represented. It is distinctive from the out of box system as this custom layout features an icon, category name, and short description for users to distinguish which category to use. You can customize and style this widget using the available instance options and associated custom templates.
### Instance Options
| Option | Property | Comments | Default Value | Source |
| ----- |:-----:| ---- | ---- | ---- |
| Page | `sp_page` | This property can be used to select a page which is used to create the URL for each category. | `Default value` | Instance |
| Template | `u_template` | This property allows a custom template to be selected. | `Default value` | Instance |
| Bootstrap class name | `class_name` | CSS classes entered here will be applied to the column. | `Default value` | Instance |
| Show Panel | `show_panel` | Shows interactive buttons on a panel. | `false` | Options Schema |
| Column Classes | `col_class` | CSS classes specified in this property will be applied to the column. | `col-md-3` | Options Schema |
| Image Field | `image_field` | This property specifies which field should be used for images displayed for each category. | `homepage_image` | Options Schema |
| Catalog| `catalog_id` | Shows catalog items on a panel. | `Default value` | Options Schema |
### CSS/SASS Variables
_CSS/SASS variables are given default values that can be overridden with theming or portal-level CSS._
| Variable | Comments |
| -------- |:-------------:|
| `$nr-category-button-image-size:` | This variable controls the size of the image on the tabs. |
| `$nr-category-button-height` | This variable controls the height of the images for all items. |
| `$nr-category-button-title-color` | This variable controls the color of the title text for all items. |
### Templates
| Name | Comments |
| -------- |:---|
| `nr-category-button-default.html` | Sets the standard card template. |
| `nr-category-button-animated.html` | Card animates over hover. |
.svg)
