Title

### Description

Orient users to a particular page by presenting a title or introduction to the page the user is on. The Title widget is able to dynamically pull in metadata from various sources (i.e. the user's name, page title, or other variables) to present information. You can customize and style this widget using the available instance options and associated custom templates.

### Instance Options

This widget allows for easy customization of the title, description, CSS classes applied to the parent element, dynamically displayed system titles (replaces custom title), and the size of the title text. This widget also has access to the user object and can pull any of the user's fields, such as the first name shown below:

Hi {{first_name}}, how can we help today?

This will display the logged-in user's first name, as shown in the demo above.

|  Option       | Property | Comments | Default Value | Source |
| ----- |:-----:| ---- | ---- | ---- |
| Title | `title` | This field controls the text which is displayed in the title area. | `Default value` | Instance |
| Short description | `short_description` | This field controls the text which is optionally displayed below the title. | `Default value` | Instance |
| Bootstrap class | `class_name` | This field accepts CSS classes to be applied to the parent element. | `Default value` | Instance |
| Show | `show` | This field controls where the dynamic title will be pulled from for the title area; the default value be the title field from the instance options. | `Default value` | Instance |
| Heading Size | `heading_size` | This field controls the size of the title. | `Default value` | Instance |
| Show Image | `show_image` | Show a banner image. | `false` | Instance |
| Hide Description | `hide_description` | Show a description. | `false` | Instance |
| Template | `u_template` | Customize the layout of the widget. | `Default value` | Instance |

### CSS/SASS Variables
_CSS/SASS variables are given default values that can be overridden with theming or portal-level CSS._
| Variable | Comments |
| -------- |:---|
| `$nr-title-margin` | This variable controls the margin of the title. |
| `$nr-title-image-size` | This variable controls the image size in the title. |

### Templates
| Name | Comments |
| -------- |:---|
| `nr-title-default.html` | Displays the default template. |