### Description
Present SC Category items in a visually engaging way. The SC Category Items widget helps users quickly find and select the items needed to accomplish their goals. It also gives you more flexibility with customization and layout. You can customize and style this widget using the available instance options and associated custom templates without cloning.
### Instance Options
| Option | Property | Comments | Default Value | Source |
| ----- |:-----:| ---- | ---- | ---- |
| 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 |
| Results per page | `results_per_page` | The integer entered here will be used to determine the number of items to show. | `9` | Options Schema |
| Column Classes | `col_class` | CSS classes specified in this property will be applied to the column. | `col-md-4` | Options Schema |
| Category | `category_id` | Displays the catalog items on a panel. | `Default value` | Options Schema |
| Page | `sp_page` | Used to specify the page. | `Default value` | Instance |
| Show items from child categories | `depth_search` | If true, subcategories are also searched. | `true` | Options Schema |
| Show only on end categories | `show_only_on_end_categories` | If true, items will be hidden for categories with subcategories. | `false` | Options Schema |
| Inherit images | `inherit_images` | Displays the parent category image if no image is set on the catalog item. | `false` | 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-item-image-size` | This is used to set the default height and width of the image on each item. |
| `$nr-category-item-title-color` | This is used to set the default color of the title text on each item. |
| `$nr-category-item-text-color` | This is used to set the default color of the text below the title on each items. |
| `$nr-category-item-height` | This is used to set the default height of the category items. |
### Templates
| Name | Comments |
| -------- |:---|
| `left-icon.html` | Sets an icon next to the standard card template. |
| `sc_category_animated_items.html` | Cards animate over hover. |
| `card.html` | Displays a card template. |
| `LP-left-icon.html` | Sets an icon above the standard card template. |
.svg)
