Components

Inset text

Note: Component coming soon

We are still working on this component. We will release it soon, and we would appreciate your feedback then.

Example of Inset Text

Code

Mustache / Handlebars// Developer note: ensure your ".mustache" files are imported as plain text. In Webpack you might use https://github.com/webpack-contrib/raw-loader import Mustache from "mustache"; import InsetText from "@govtnz/ds/build/mustache/InsetText.mustache"; // The variables InsetText are all strings that are mustache templates. export default `${Mustache.render(InsetText, {})}`;

React (JavaScript)import React from "react"; import InsetText from "@govtnz/ds/build/react-js/InsetText"; import "@govtnz/ds/build/css/InsetText.css"; // or @govtnz/ds/build/scss/InsetText.scss export default () => <InsetText />;

React (TypeScript)import React from "react"; import InsetText from "@govtnz/ds/build/react-ts/InsetText"; import "@govtnz/ds/build/css/InsetText.css"; // or @govtnz/ds/build/scss/InsetText.scss export default () => <InsetText />;

React with Styled Components (JavaScript)import React from "react"; import InsetText from "@govtnz/ds/build/react-js-styled-components/InsetText"; export default () => <InsetText />;

React with Styled Components (TypeScript)import React from "react"; import InsetText from "@govtnz/ds/build/react-ts-styled-components/InsetText"; export default () => <InsetText />;

Vue (JavaScript)<template> <inset-text /> </template> <script> import Vue from "vue"; import InsetText from "@govtnz/ds/build/vue-js/InsetText.vue"; export default { components: { "inset-text": InsetText } }; </script>

Vue (TypeScript)<template> <inset-text /> </template> <script lang="ts"> import Vue from "vue"; import InsetText from "@govtnz/ds/build/vue-ts/InsetText.vue"; export default { components: { "inset-text": InsetText } }; </script>

HTML <div class="g-inset-text"> It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. </div>

Credit

Guidance, original HTML and CSS derived from GOV.UK Design System.

Get in touch

If you’ve got a question, idea, or suggestion, email the Design System (DS) team at info@digital.govt.nz, use our NZGDS Slack app, or discuss Inset text on 'GitHub issues'.