<  Widgets

RocketFuel SC Category Buttons

Widget

### Description

This widget allows users to select service catalog categories.

### Configuration

Configuration of this widget is optional.

### Widget Option Schema Parameters

The instance options allow you to specify a page, specify custom classes for the column, conditionally show and hide panel styling around each category and select which image field should be used to display category images.

|  Option       | Property | Comments | Source |
| ----- |:-----:| ---- |
| Bootstrap class name | `class_name` | CSS classes specified in this property will be applied to the column. | Instance |
| Column Classes | `col_class` | CSS classes specified in this property will be applied to the column.  | Options Schema |
| Show Panel | `show_panel` | If this property is selected/'true', a white background and some panel styling will appear behind each item. | Options Schema |
| Image Field | `image_field` | This property specifies which field should be used for images displayed for each category. | Options Schema |

### Sample Data
```json
{
"data": {
"col_class": "col-md-3",
"panel_classes": "panel panel-default panel-body",
"categories": [
{
"title": "Access",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
"picture": "http://via.placeholder.com/200x200",
"url": "#"
},
{
"title": "Hardware",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
"picture": "http://via.placeholder.com/200x200",
"url": "#"
}
]
}
}
```
### Dependencies
_Dependencies are included and configured as part of the provided Update Set._

> None


### CSS/SASS Variables

_CSS/SASS variables are given default values that can be overridden with theming or portal-level CSS._


| Variable | Comments |
| -------- |:-------------:|
| `$nr-tabbed-items-tab-color` | This variable controls the color of the text on the tabs as well as the border below the text. |
| `$nr-tabbed-items-image-size` | This variable controls the height and width of the images for all items.  |
| `$nr-tabbed-items-title-color` | This variable controls the color of the title text for all items. |
| `$nr-tabbed-items-text-color` | This variable controls the color of the description text for all items. |

Get Awesome Updates

Enter your email address for news and updates from NewRocket.

Thanks for your email!
There was an error, please try submitting again.