Phase indicators
About
What does it do?
- Helps users to identify when a service is in a development phase
When to use it?
- Every service that has not passed its public beta service assessment must have a phase indicator
- Within the header pattern
- Within the phase banner pattern
A service can either be in Alpha (prototype stage) or Beta (when it is on a publicly accessible website).
Beta
HTML markup
<span class="wmnds-phase-indicator">
Beta
</span>
Nunjucks markup
{% from "wmnds/components/phase-indicator/_phase-indicator.njk" import wmndsPhaseIndicator %}
{{ wmndsPhaseIndicator() }}Phase indicator with link
HTML markup
<div class="wmnds-grid wmnds-banner-container">
<div class="wmnds-col-auto wmnds-float-left wmnds-m-r-xsm">
<span class="wmnds-phase-indicator">
Beta
</span>
</div>
<div class="wmnds-col-auto">
<p class="wmnds-banner-container__text">
<a href="#" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
Try our new disruptions page
</a>
</p>
</div>
</div>
Nunjucks markup
{% from "wmnds/components/phase-indicator/phase-indicator-link/_phase-indicator-link.njk" import wmndsPhaseIndicatorLink %}
{{
wmndsPhaseIndicatorLink({
contentText: "Try our new disruptions page",
href: "#",
title: "link title"
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| contentText | string | Text content for the phase indicator link |
| href | string | Specifies the href to be used in the phase indicator link |
| title | string | Title text for the phase indicator link |