# Extending the Dashboard using the Umbraco UI library The [Umbraco UI Library](/umbraco-cms/13.latest/extending/ui-library.md) is a set of web components that we can use to build Umbraco User Interfaces. To get started using the UI library, the easiest way is to add the Content Delivery Network (CDN) script. Add it at the bottom of the `WelcomeDashboard.html` file. {% code title="WelcomeDashboard.html" %} ```javascript ``` {% endcode %} Once it has been added, we can start building our UI for our editors. Since we are showing our editors their recently edited content nodes on this dashboard, it makes sense to use the [Content Node Card](https://uui.umbraco.com/?path=/docs/uui-card-content-node--aaa-overview): ![Content Node Card](/files/nrZWK9hpjLUjIAk6FHoD) 1. Wrap our unordered list and its content in the `` so it will look like this: {% code title="WelcomeDashboard.html" %} ```html ``` {% endcode %} Make sure that the card shows the name of the content nodes that the editors recently worked with. 2. Replace *"The card"* value of the `name` property in the `` with `{{logEntry.Content.name}}` so it will look like this: {% code title="WelcomeDashboard.html" %} ```html ``` {% endcode %} 3. Move the `ng-repeat` parameter from the tag below into the `uui-card-content-node` as well: {% code title="WelcomeDashboard.html" %} ```html ``` {% endcode %} At this point, the code looks like this: {% code title="WelcomeDashboard.html" %} ```html ``` {% endcode %} We want the editors to go directly to the content node, 4. Move the `{{logEntry.Content.name}} - {{logEntry.comment}}` line down under the ``. 5. Add some text to the `` tag like *"click here"* or *"See Node".* This is how the code should look like this: {% code title="WelcomeDashboard.html" %} ```html {{logEntry.comment}}See Node
  • (Edited on: {{logEntry.timestamp | date:'medium'}})
``` {% endcode %} 6. Go ahead and update the `
    ` tag with the style from the UI library Card with the following: {% code title="WelcomeDashboard.html" %} ```css style="list-style: none; padding-inline-start: 0px; margin: 0; ``` {% endcode %} 7. Remove the `` from our list as we won't be using the icon as the card has one by default. Once that is done, our code looks like this: {% code title="WelcomeDashboard.html" %} ```html {{logEntry.comment}}See Node
    • (Edited on: {{logEntry.timestamp | date:'medium'}})
    ``` {% endcode %} 8. Add the styling from the **Content Node Card** to our `
  • ` tag as well so it will look like this: {% code title="WelcomeDashboard.html" %} ```html
  • Edited on: {{logEntry.timestamp | date:'medium'}}
    • ``` {% endcode %} Once the styling has been added, we are done editing the card. And your file should look like this: {% code title="WelcomeDashboard.html" %} ```html

    Default heading {{vm.UserName}}

    Default bodytext

    Default copyright

    We know what you edited last week...

    {{logEntry.comment}}See Node
    • Edited on: {{logEntry.timestamp | date:'medium'}}


    ``` {% endcode %} The last thing we need to do is to add a bit of styling to the UI. 9. Go to the `customwelcomedashboard.css` file and add the following: {% code title="" %} ```css uui-card-content-node { margin-bottom: 20px; width: 10%; } ``` {% endcode %} Once it has been added, we are done and it should look something like this:

    Custom Dashboard extended with UI Library Card

    --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.umbraco.com/umbraco-cms/13.latest/tutorials/creating-a-custom-dashboard/extending-the-dashboard-using-the-umbraco-ui-library.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.