Hello world
This is a basic hello world example
Hello world
This is an example using a basic hello world component without many bells or whistles
<div class="tel-example-card">
<div class="tel-example-card__content">
<h2 class="tel-example-card__title">
<a href="#">Request repeat prescriptions</a>
</h2>
<p class="tel-example-card__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit
auctor dui, sed efficitur enim.
</p>
</div>
</div>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| title | string | yes | The title text. Renders as a h2 heading |
| href | string | conditional | The title link. |
| description | string | conditional | Plain text description, wrapped in a P tag, below the title. |
{% from 'tel/components/hello-world/macro.njk' import exampleHelloWorld %}
{{ exampleHelloWorld({
title: 'Request repeat prescriptions',
href: '#',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, sed efficitur enim.'
}) }}
To use the component in your design, add the NHS TEL Figma library to your working files, and navigate using the components tab.
To use the component in your .net application, install the NHS TEL Razor Component Library and import the component.