@springernature/global-customer-satisfaction-input
Version:
HTML form based component for gathering customer satisfaction data
1,934 lines (1,728 loc) • 76.7 kB
HTML
<!DOCTYPE html><html lang="en"><head>
<script>
(function(e){var t=e.documentElement,n=e.implementation;t.className='js';})(document)
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@springernature/global-customer-satisfaction-input</title>
<style>
@charset "UTF-8";
/**
* Core
* Styles for all pages, included on pages that
* both do and dont cut the mustard, keep to a minimum
*/
/**
* Abstracts
* Sass tools, helper files, variables, functions, mixins and other config files
* These files don’t output any CSS when compiled
*/
/**
* Abstracts
* Sass tools, helper files, variables, functions, mixins and other config files
* These files don’t output any CSS when compiled
*/
/**
* Breakpoints
* Shared media query values
*/
/**
* Colors
* Maps for color values & greyscale settings
*
*/
/**
* Shared colors
* Applicable to all brands and not to be overwritten
*
*/
/**
* Typography
* Font settings
*/
/**
* Button settings
* Default
*
*/
/**
* Return a greyscale color based on $context--greyscale-base
*
* @param {Integer} $val - lightness value between $context--greyscale-min and $context--greyscale-max
* @param {Float} $opacity - opacity value between 0.1 and 1, to one decimal place
*
*/
/**
* Return a color from a color palette
*
* @param {String} $name - name of the color to insert
* @param {Arglist} $keys - 0 to 2 paramaters defining map and opacity
*
*/
/**
* Returns either a dark or light foreground color when given the background color
*
* @param {Integer|String} $bgcolor - number for grays, string for colors
* @param {Map} $map - the color map to use
*
*/
/**
* Calculates the sRGB luma of a colour
* @private
*
* @param {*} $c - Color value
*
* https://lnikki.la/articles/sass-better-colour-based-on-brightness/
* http://robots.thoughtbot.com/closer-look-color-lightness
*
*/
/**
* Style
* Cosmetic styling settings
*
*/
/**
* Return a greyscale color based on $context--greyscale-base
*
* @param {Integer} $val - lightness value between $context--greyscale-min and $context--greyscale-max
* @param {Float} $opacity - opacity value between 0.1 and 1, to one decimal place
*
*/
/**
* Return a color from a color palette
*
* @param {String} $name - name of the color to insert
* @param {Arglist} $keys - 0 to 2 paramaters defining map and opacity
*
*/
/**
* Returns either a dark or light foreground color when given the background color
*
* @param {Integer|String} $bgcolor - number for grays, string for colors
* @param {Map} $map - the color map to use
*
*/
/**
* Calculates the sRGB luma of a colour
* @private
*
* @param {*} $c - Color value
*
* https://lnikki.la/articles/sass-better-colour-based-on-brightness/
* http://robots.thoughtbot.com/closer-look-color-lightness
*
*/
/**
* Return a greyscale color based on $context--greyscale-base
*
* @param {Integer} $val - lightness value between $context--greyscale-min and $context--greyscale-max
* @param {Float} $opacity - opacity value between 0.1 and 1, to one decimal place
*
*/
/**
* Return a color from a color palette
*
* @param {String} $name - name of the color to insert
* @param {Arglist} $keys - 0 to 2 paramaters defining map and opacity
*
*/
/**
* Returns either a dark or light foreground color when given the background color
*
* @param {Integer|String} $bgcolor - number for grays, string for colors
* @param {Map} $map - the color map to use
*
*/
/**
* Calculates the sRGB luma of a colour
* @private
*
* @param {*} $c - Color value
*
* https://lnikki.la/articles/sass-better-colour-based-on-brightness/
* http://robots.thoughtbot.com/closer-look-color-lightness
*
*/
/**
* Map deep get
* @author Hugo Giraudel
* @private
*
* @param {Map} $map - Map
* @param {Arglist} $keys - Key chain
* @return {*} - Desired value
*
*/
/**
* Map key get
* Check if a key exists in a map, return it
* @private
*
* @param {Map} $map - Map
* @param {String} $value - Key name
* @return {*} - Key name, if found
*
*/
/**
* Style mixins
*
*/
/**
* Breakpoints
* Media query helper
* @group 30-mixins
*/
/**
* Colour palette
*
*/
/**
* Color and gray scales
*
*/
/**
* Style
* Cosmetic styling settings
*
*/
/**
* Button settings
* Springer
*
*/
/**
* Generates utility classnames for base and each breakpoint
*
* Example:
* @include class-stack('u-text-right') would output
* u-text-right { @content }
* @include media-query('xs') { u-text-right-at-lt-xs { @content } }
*
*/
/**
* Default link style
*
*/
/**
* Alternative link color
*
*/
/**
* Deemphasised link color
*
*/
/**
* Unvisited
*
*/
/**
* Link like
* Style non-links to look like links
* Remember to add aria
*
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
body {
line-height: 1.5;
}
button {
cursor: pointer;
}
img {
border: 0;
max-width: 100%;
height: auto;
vertical-align: middle;
}
/**
* Basic
* Some default CSS styles
*/
body {
font-size: 0.813rem;
}
* {
margin: 0;
}
a {
color: #069;
}
h1 {
font-size: 1.875rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.0625rem;
}
h4 {
font-size: 0.875rem;
}
cite {
font-style: normal;
}
ins {
text-decoration: none;
}
button {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
border-radius: 0;
}
/**
* Enhanced
* Bootstrap the rest of the styles on cut the mustard
*/
/**
* Abstracts
* Sass tools, helper files, variables, functions, mixins and other config files
* These files don’t output any CSS when compiled
*/
/**
* Abstracts
* Sass tools, helper files, variables, functions, mixins and other config files
* These files don’t output any CSS when compiled
*/
/**
* Breakpoints
* Shared media query values
*/
/**
* Colors
* Maps for color values & greyscale settings
*
*/
/**
* Shared colors
* Applicable to all brands and not to be overwritten
*
*/
/**
* Typography
* Font settings
*/
/**
* Button settings
* Default
*
*/
/**
* Return a greyscale color based on $context--greyscale-base
*
* @param {Integer} $val - lightness value between $context--greyscale-min and $context--greyscale-max
* @param {Float} $opacity - opacity value between 0.1 and 1, to one decimal place
*
*/
/**
* Return a color from a color palette
*
* @param {String} $name - name of the color to insert
* @param {Arglist} $keys - 0 to 2 paramaters defining map and opacity
*
*/
/**
* Returns either a dark or light foreground color when given the background color
*
* @param {Integer|String} $bgcolor - number for grays, string for colors
* @param {Map} $map - the color map to use
*
*/
/**
* Calculates the sRGB luma of a colour
* @private
*
* @param {*} $c - Color value
*
* https://lnikki.la/articles/sass-better-colour-based-on-brightness/
* http://robots.thoughtbot.com/closer-look-color-lightness
*
*/
/**
* Style
* Cosmetic styling settings
*
*/
/**
* Return a greyscale color based on $context--greyscale-base
*
* @param {Integer} $val - lightness value between $context--greyscale-min and $context--greyscale-max
* @param {Float} $opacity - opacity value between 0.1 and 1, to one decimal place
*
*/
/**
* Return a color from a color palette
*
* @param {String} $name - name of the color to insert
* @param {Arglist} $keys - 0 to 2 paramaters defining map and opacity
*
*/
/**
* Returns either a dark or light foreground color when given the background color
*
* @param {Integer|String} $bgcolor - number for grays, string for colors
* @param {Map} $map - the color map to use
*
*/
/**
* Calculates the sRGB luma of a colour
* @private
*
* @param {*} $c - Color value
*
* https://lnikki.la/articles/sass-better-colour-based-on-brightness/
* http://robots.thoughtbot.com/closer-look-color-lightness
*
*/
/**
* Return a greyscale color based on $context--greyscale-base
*
* @param {Integer} $val - lightness value between $context--greyscale-min and $context--greyscale-max
* @param {Float} $opacity - opacity value between 0.1 and 1, to one decimal place
*
*/
/**
* Return a color from a color palette
*
* @param {String} $name - name of the color to insert
* @param {Arglist} $keys - 0 to 2 paramaters defining map and opacity
*
*/
/**
* Returns either a dark or light foreground color when given the background color
*
* @param {Integer|String} $bgcolor - number for grays, string for colors
* @param {Map} $map - the color map to use
*
*/
/**
* Calculates the sRGB luma of a colour
* @private
*
* @param {*} $c - Color value
*
* https://lnikki.la/articles/sass-better-colour-based-on-brightness/
* http://robots.thoughtbot.com/closer-look-color-lightness
*
*/
/**
* Map deep get
* @author Hugo Giraudel
* @private
*
* @param {Map} $map - Map
* @param {Arglist} $keys - Key chain
* @return {*} - Desired value
*
*/
/**
* Map key get
* Check if a key exists in a map, return it
* @private
*
* @param {Map} $map - Map
* @param {String} $value - Key name
* @return {*} - Key name, if found
*
*/
/**
* Style mixins
*
*/
/**
* Breakpoints
* Media query helper
* @group 30-mixins
*/
/**
* Colour palette
*
*/
/**
* Color and gray scales
*
*/
/**
* Style
* Cosmetic styling settings
*
*/
/**
* Button settings
* Springer
*
*/
/**
* Generates utility classnames for base and each breakpoint
*
* Example:
* @include class-stack('u-text-right') would output
* u-text-right { @content }
* @include media-query('xs') { u-text-right-at-lt-xs { @content } }
*
*/
/**
* Default link style
*
*/
/**
* Alternative link color
*
*/
/**
* Deemphasised link color
*
*/
/**
* Unvisited
*
*/
/**
* Link like
* Style non-links to look like links
* Remember to add aria
*
*/
button {
line-height: inherit;
}
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: 4px solid #ffcc00;
}
input[type=file]:focus-within {
outline: 4px solid #ffcc00;
}
button:disabled:focus,
input:disabled:focus,
select:disabled:focus,
textarea:disabled:focus {
outline: none;
}
label {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
/*
* Layout
* Universal layout styles
*/
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
height: 100%;
overflow-y: scroll;
font-size: 100%;
box-sizing: border-box;
color: #333333;
line-height: 1.6180339888;
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
max-width: 100%;
min-height: 100%;
background: #fcfcfc;
font-size: 1.125rem; /* fixes chrome rems bug - http://stackoverflow.com/questions/20099844/chrome-not-respecting-rem-font-size-on-body-tag */
}
figure {
margin: 0;
}
body,
div,
dl,
dt,
dd,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
th,
td {
margin: 0;
padding: 0;
}
abbr[title] {
text-decoration: none;
}
[contenteditable]:focus,
[tabindex="0"]:focus {
outline: 4px solid #ffcc00;
}
a {
color: #004b83;
text-decoration: underline;
text-decoration-skip-ink: auto;
}
a.visited, a:visited {
color: #a345c9;
}
a.hover, a:hover {
color: #0061a9;
}
a.active, a:active {
color: #003b84;
text-decoration: none;
}
a.focus, a:focus {
outline: 4px solid #ffcc00;
}
a > img {
vertical-align: middle;
}
table {
border: 1px solid #a6a6a6;
width: 100%;
margin-bottom: 32px;
}
th,
td {
font-size: 1rem;
border: 1px solid #a6a6a6;
padding: 0.3em 0.6em;
vertical-align: top;
}
th {
background: #e6e6e6;
text-align: left;
}
h1 {
font-style: normal;
line-height: 1.4;
font-size: 2.25rem;
font-size: min(max(1.75rem, 4vw), 2.25rem);
font-family: Georgia, Palatino, serif;
font-weight: 400;
}
h1 a.active, h1 a:active, h1 a.hover, h1 a:hover {
text-decoration: underline;
text-decoration-skip-ink: auto;
}
h2 {
font-style: normal;
line-height: 1.4;
font-size: 1.75rem;
font-size: min(max(1.5rem, 3.5vw), 1.75rem);
font-family: Georgia, Palatino, serif;
font-weight: 400;
}
h2 a.active, h2 a:active, h2 a.hover, h2 a:hover {
text-decoration: underline;
text-decoration-skip-ink: auto;
}
h3 {
font-style: normal;
line-height: 1.4;
font-size: 1.5rem;
font-size: min(max(1.25rem, 3vw), 1.5rem);
font-family: Georgia, Palatino, serif;
font-weight: 400;
}
h3 a.active, h3 a:active, h3 a.hover, h3 a:hover {
text-decoration: underline;
text-decoration-skip-ink: auto;
}
h4 {
font-style: normal;
line-height: 1.4;
font-size: 1.25rem;
font-size: min(max(1.125rem, 2.5vw), 1.25rem);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-weight: 700;
}
h4 a.active, h4 a:active, h4 a.hover, h4 a:hover {
text-decoration: underline;
text-decoration-skip-ink: auto;
}
h5,
h6 {
font-style: normal;
line-height: 1.4;
font-size: 1.125rem;
font-size: min(max(1rem, 2.5vw), 1.125rem);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-weight: 700;
}
h5 a.active, h5 a:active, h5 a.hover, h5 a:hover,
h6 a.active,
h6 a:active,
h6 a.hover,
h6 a:hover {
text-decoration: underline;
text-decoration-skip-ink: auto;
}
/* Basic lists should be aligned to the left */
ul:not([class]),
ol:not([class]) {
/* Allow for bullet itself */
padding-left: 0.9em;
}
dd {
margin: 0;
}
cite {
font-style: normal;
}
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
.c-page-layout {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
grid-template-columns: 1fr;
background-color: #fff;
border: 1px solid #ccc;
max-width: 1280px;
}
.c-page-layout__header,
.c-page-layout__main,
.c-page-layout__sidebar,
.c-page-layout__footer {
border: 1px dashed #ccc;
min-height: 100px;
width: 100%;
}
.c-page-layout__container {
margin: 0 auto;
padding: 0 16px;
}
.c-page-layout__main {
display: flex;
flex-wrap: wrap;
gap: 64px;
}
.c-page-layout__sidebar {
flex-grow: 1;
flex-basis: 454px;
}
.c-page-layout__main > :not(.c-page-layout__sidebar) {
flex-basis: 0;
flex-grow: 999;
min-width: 53%;
}
.c-customer-satisfaction-input {
position: relative;
padding: 16px;
background-color: #f3f3f3;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.4;
}
.c-customer-satisfaction-input__container {
display: flex;
justify-content: center;
}
.c-customer-satisfaction-input__heading {
margin: 0 0 8px !important;
font-family: inherit !important;
font-size: 16px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
}
.c-customer-satisfaction-input__form {
text-align: center;
}
.c-customer-satisfaction-input__link {
display: inline-block;
margin-top: 8px;
font-family: inherit;
font-size: 16px;
}
.c-customer-satisfaction-input__button {
-webkit-appearance: button;
align-items: center;
background-color: #fff;
border-radius: 32px;
border: 1px solid #01324b;
box-shadow: none;
color: #01324b;
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.4;
margin: 12px 0 0;
overflow: visible;
padding: 8px 24px;
text-align: center;
text-decoration: none;
text-transform: none;
transition: all 0.2s;
width: 75%;
}
.c-customer-satisfaction-input__submit-message-container {
display: flex;
justify-content: flex-start;
align-items: center;
}
.c-customer-satisfaction-input__submit-message {
margin: 0;
line-height: 1.4;
font-family: inherit;
font-size: 16px;
}
.c-customer-satisfaction-input__visually-hidden {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.c-customer-satisfaction-input__field {
font-size: 1rem;
}
.c-customer-satisfaction-input__field small {
font-size: inherit;
}
.c-customer-satisfaction-input__fieldset {
padding: 0;
border: 0;
margin: 0;
}
.c-customer-satisfaction-input__input {
box-sizing: border-box;
border: 1px solid;
color: #000;
width: 100%;
padding: 0.5rem 0.5rem;
background-color: #fff;
font-weight: 400;
}
.c-customer-satisfaction-input__input:focus {
outline: 3px solid #0088cc;
}
.c-customer-satisfaction-input__pictographic-radios {
display: flex;
flex-direction: row;
justify-content: center;
gap: 5px;
flex-wrap: wrap;
}
@media only screen and (min-width: 540px) {
.c-customer-satisfaction-input__pictographic-radios {
gap: 16px;
}
}
.c-customer-satisfaction-input__label {
font-family: inherit;
font-size: 12px;
font-weight: 700;
color: #000;
padding: 0;
}
.c-customer-satisfaction-input__label--pictographic-radio {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
font-weight: 400;
cursor: pointer;
}
.c-customer-satisfaction-input__label + .c-customer-satisfaction-input__label {
margin-top: 0;
}
@media only screen and (min-width: 320px) {
.c-customer-satisfaction-input__label {
font-size: 14px;
}
.c-customer-satisfaction-input__label--pictographic-radio {
flex-direction: column;
justify-content: space-between;
}
.c-customer-satisfaction-input__pictographic-radios .c-customer-satisfaction-input__label + .c-customer-satisfaction-input__label {
margin-top: 0;
}
}
.c-customer-satisfaction-input__submit-message-container svg {
width: 24px;
height: 24px;
margin-right: 8px;
fill: #00a79d;
}
.c-customer-satisfaction-input__error-icon svg {
height: 1rem;
width: 1rem;
vertical-align: -0.0625rem;
overflow: visible;
pointer-events: none;
margin-right: 4px;
}
.c-customer-satisfaction-input__label--pictographic-radio svg {
background-color: #fff;
border-radius: 2px;
border: 2px solid #999;
box-sizing: content-box;
fill: #fff;
flex: 0 0 auto;
height: 21px;
padding: 6px;
stroke: #01324b;
width: 21px;
}
:checked + .c-customer-satisfaction-input__label--pictographic-radio svg {
fill: #01324b;
background-color: #01324b;
stroke: #fff;
border-color: #fff;
}
:focus + .c-customer-satisfaction-input__label--pictographic-radio svg,
.c-customer-satisfaction-input__label--pictographic-radio:hover svg {
box-shadow: 0 0 0 3px #0088cc;
}
@media only screen and (min-width: 540px) {
.c-customer-satisfaction-input__label--pictographic-radio svg {
width: 24px;
height: 24px;
padding: 8px;
}
}
.c-customer-satisfaction-input__error {
display: none;
color: #c40606;
font-weight: 400;
margin-bottom: 8px;
}
.c-customer-satisfaction-input--show-error .c-customer-satisfaction-input__error {
display: flex;
align-items: flex-start;
}
.u-display-none {
display: none;
}
/* hide from both screenreaders and browsers */
.u-hide,
.js .u-js-hide {
display: none;
visibility: hidden;
}
.u-hide:first-child + *,
.js .u-js-hide:first-child + * {
margin-block-start: 0;
}
/* show to both screenreaders and browsers */
.u-show,
.js .u-js-show {
display: block;
visibility: visible;
}
.u-show-inline,
.js .u-js-show-inline {
display: inline;
visibility: visible;
}
/* hide only visually, but have it available for screenreaders */
.u-visually-hidden,
.js .u-js-visually-hidden {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -100%;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
}
.u-visually-hidden--off,
.js .u-js-visually-hidden--off {
border: 0;
clip: initial;
height: auto;
margin: 0;
overflow: auto;
padding: 0;
position: relative;
width: auto;
}
/* make invisible but retain dimensions */
.u-invisible {
visibility: hidden;
}
/* hide only the text, keep element visible */
.u-hide-text,
.js .u-js-hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
direction: ltr;
vertical-align: bottom;
}
/* hiding overflow */
.u-hide-overflow {
overflow: hidden;
}
@media print {
.u-hide-print {
display: none;
}
}
/**
* media-query hiding
* intentionally avoids 'max' and 'range' to prevent bloat
*/
@media only screen and (min-width: 320px) {
.u-hide-at-xs,
.js .u-js-hide-at-xs {
display: none;
visibility: hidden;
}
.u-hide-at-xs:first-child + *,
.js .u-js-hide-at-xs:first-child + * {
margin-block-start: 0;
}
.u-show-at-xs,
.js .u-js-show-at-xs {
display: block;
visibility: visible;
}
}
@media only screen and (min-width: 540px) {
.u-hide-at-sm,
.js .u-js-hide-at-sm {
display: none;
visibility: hidden;
}
.u-hide-at-sm:first-child + *,
.js .u-js-hide-at-sm:first-child + * {
margin-block-start: 0;
}
.u-show-at-sm,
.js .u-js-show-at-sm {
display: block;
visibility: visible;
}
}
@media only screen and (min-width: 768px) {
.u-hide-at-md,
.js .u-js-hide-at-md {
display: none;
visibility: hidden;
}
.u-hide-at-md:first-child + *,
.js .u-js-hide-at-md:first-child + * {
margin-block-start: 0;
}
.u-show-at-md,
.js .u-js-show-at-md {
display: block;
visibility: visible;
}
}
@media only screen and (min-width: 1024px) {
.u-hide-at-lg,
.js .u-js-hide-at-lg {
display: none;
visibility: hidden;
}
.u-hide-at-lg:first-child + *,
.js .u-js-hide-at-lg:first-child + * {
margin-block-start: 0;
}
.u-show-at-lg,
.js .u-js-show-at-lg {
display: block;
visibility: visible;
}
}
@media only screen and (min-width: 1220px) {
.u-hide-at-xl,
.js .u-js-hide-at-xl {
display: none;
visibility: hidden;
}
.u-hide-at-xl:first-child + *,
.js .u-js-hide-at-xl:first-child + * {
margin-block-start: 0;
}
.u-show-at-xl,
.js .u-js-show-at-xl {
display: block;
visibility: visible;
}
}
.u-ma-0 {
margin: 0;
}
.u-ma-2 {
margin: 2px;
}
.u-ma-4 {
margin: 4px;
}
.u-ma-8 {
margin: 8px;
}
.u-ma-16 {
margin: 16px;
}
.u-ma-24 {
margin: 24px;
}
.u-ma-32 {
margin: 32px;
}
.u-ma-48 {
margin: 48px;
}
.u-ma-64 {
margin: 64px;
}
.u-ma-auto {
margin: auto;
}
.u-mt-0 {
margin-top: 0;
}
.u-mt-2 {
margin-top: 2px;
}
.u-mt-4 {
margin-top: 4px;
}
.u-mt-8 {
margin-top: 8px;
}
.u-mt-16 {
margin-top: 16px;
}
.u-mt-24 {
margin-top: 24px;
}
.u-mt-32 {
margin-top: 32px;
}
.u-mt-48 {
margin-top: 48px;
}
.u-mt-64 {
margin-top: 64px;
}
.u-mt-auto {
margin-top: auto;
}
.u-mr-0 {
margin-right: 0;
}
.u-mr-2 {
margin-right: 2px;
}
.u-mr-4 {
margin-right: 4px;
}
.u-mr-8 {
margin-right: 8px;
}
.u-mr-16 {
margin-right: 16px;
}
.u-mr-24 {
margin-right: 24px;
}
.u-mr-32 {
margin-right: 32px;
}
.u-mr-48 {
margin-right: 48px;
}
.u-mr-64 {
margin-right: 64px;
}
.u-mr-auto {
margin-right: auto;
}
.u-mb-0 {
margin-bottom: 0;
}
.u-mb-2 {
margin-bottom: 2px;
}
.u-mb-4 {
margin-bottom: 4px;
}
.u-mb-8 {
margin-bottom: 8px;
}
.u-mb-16 {
margin-bottom: 16px;
}
.u-mb-24 {
margin-bottom: 24px;
}
.u-mb-32 {
margin-bottom: 32px;
}
.u-mb-48 {
margin-bottom: 48px;
}
.u-mb-64 {
margin-bottom: 64px;
}
.u-mb-auto {
margin-bottom: auto;
}
.u-ml-0 {
margin-left: 0;
}
.u-ml-2 {
margin-left: 2px;
}
.u-ml-4 {
margin-left: 4px;
}
.u-ml-8 {
margin-left: 8px;
}
.u-ml-16 {
margin-left: 16px;
}
.u-ml-24 {
margin-left: 24px;
}
.u-ml-32 {
margin-left: 32px;
}
.u-ml-48 {
margin-left: 48px;
}
.u-ml-64 {
margin-left: 64px;
}
.u-ml-auto {
margin-left: auto;
}
.u-pa-0 {
padding: 0;
}
.u-pa-2 {
padding: 2px;
}
.u-pa-4 {
padding: 4px;
}
.u-pa-8 {
padding: 8px;
}
.u-pa-16 {
padding: 16px;
}
.u-pa-24 {
padding: 24px;
}
.u-pa-32 {
padding: 32px;
}
.u-pa-48 {
padding: 48px;
}
.u-pa-64 {
padding: 64px;
}
.u-pt-0 {
padding-top: 0;
}
.u-pt-2 {
padding-top: 2px;
}
.u-pt-4 {
padding-top: 4px;
}
.u-pt-8 {
padding-top: 8px;
}
.u-pt-16 {
padding-top: 16px;
}
.u-pt-24 {
padding-top: 24px;
}
.u-pt-32 {
padding-top: 32px;
}
.u-pt-48 {
padding-top: 48px;
}
.u-pt-64 {
padding-top: 64px;
}
.u-pr-0 {
padding-right: 0;
}
.u-pr-2 {
padding-right: 2px;
}
.u-pr-4 {
padding-right: 4px;
}
.u-pr-8 {
padding-right: 8px;
}
.u-pr-16 {
padding-right: 16px;
}
.u-pr-24 {
padding-right: 24px;
}
.u-pr-32 {
padding-right: 32px;
}
.u-pr-48 {
padding-right: 48px;
}
.u-pr-64 {
padding-right: 64px;
}
.u-pb-0 {
padding-bottom: 0;
}
.u-pb-2 {
padding-bottom: 2px;
}
.u-pb-4 {
padding-bottom: 4px;
}
.u-pb-8 {
padding-bottom: 8px;
}
.u-pb-16 {
padding-bottom: 16px;
}
.u-pb-24 {
padding-bottom: 24px;
}
.u-pb-32 {
padding-bottom: 32px;
}
.u-pb-48 {
padding-bottom: 48px;
}
.u-pb-64 {
padding-bottom: 64px;
}
.u-pl-0 {
padding-left: 0;
}
.u-pl-2 {
padding-left: 2px;
}
.u-pl-4 {
padding-left: 4px;
}
.u-pl-8 {
padding-left: 8px;
}
.u-pl-16 {
padding-left: 16px;
}
.u-pl-24 {
padding-left: 24px;
}
.u-pl-32 {
padding-left: 32px;
}
.u-pl-48 {
padding-left: 48px;
}
.u-pl-64 {
padding-left: 64px;
}
</style>
</head>
<body style="padding:2%">
<h1>Global Customer Satisfaction Input Demo</h1>
<p>Below is a dummy page that demonstrates the page locations this component was designed for:</p>
<div class="c-page-layout">
<div class="c-page-layout__header c-page-layout__container">
<header>
<h2>Header</h2>
</header>
</div>
<div class="c-page-layout__body c-page-layout__container">
<div class="c-page-layout__main">
<div class="c-page-layout__container">
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida scelerisque dolor, sit amet fermentum leo suscipit vel. Vivamus euismod scelerisque ex, in malesuada turpis sagittis mattis. Donec fringilla, lacus quis malesuada fermentum, mauris leo sodales dolor, id mollis mauris justo nec mi. Duis eget ullamcorper lectus. Maecenas dictum non metus ac suscipit. Sed congue aliquet dui sit amet bibendum. Suspendisse ac nisi condimentum, aliquet velit eu, tempor felis. Nunc viverra ornare massa, id rhoncus sem congue vitae. Fusce faucibus a metus nec molestie. Praesent metus augue, faucibus nec erat quis, tempor dapibus nulla. Integer viverra, neque malesuada facilisis porttitor, nisl ipsum pulvinar eros, lacinia commodo metus dui vitae quam. Phasellus tincidunt quis magna in laoreet.</p>
<p>Donec commodo placerat turpis, et aliquet neque aliquet id. Maecenas nibh libero, tristique ornare iaculis non, placerat a urna. Nulla eu pharetra ex. Nunc auctor sem et ligula imperdiet tincidunt. Donec ut neque posuere, tempus justo quis, iaculis neque. Pellentesque venenatis sapien eu quam tincidunt pretium. Ut sapien turpis, semper a urna quis, pulvinar eleifend lectus. Nulla sed diam molestie, mattis nibh volutpat, ultricies lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis ut ultricies nunc. Proin sed imperdiet nunc, non blandit turpis. Quisque eget nisi eget risus fringilla facilisis sit amet vitae odio.</p>
<p>Aliquam sed fermentum dui. Vestibulum vitae iaculis sem. Praesent porta tellus nibh. Aenean at ex id enim varius tincidunt. Etiam mi risus, ornare commodo augue vel, varius tempor neque. Mauris eget lectus imperdiet, sagittis mauris id, rutrum est. Nam eu aliquet ligula. Integer venenatis quam eget scelerisque finibus. Integer maximus massa ac mauris mattis elementum. Nulla a sagittis nisi. Suspendisse ac magna bibendum, bibendum ex a, bibendum neque. Integer ac venenatis quam, vel volutpat tellus. Phasellus dictum nunc in metus placerat, vel rutrum nibh sollicitudin. Duis vel scelerisque sapien, vitae molestie odio.</p>
<p>Vestibulum risus enim, rutrum vitae leo vel, luctus congue odio. Nam felis massa, volutpat sit amet sodales id, mattis quis dolor. Fusce feugiat diam vitae libero dapibus, ac suscipit velit bibendum. Praesent sodales ante justo, in dapibus mauris rhoncus efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eu consectetur ante, id sagittis metus. Integer at fringilla mi, non suscipit velit.</p>
<aside class="u-hide u-js-show c-customer-satisfaction-input" data-customer-satisfaction-input="" data-customer-satisfaction-input-user-journeys="get published">
<div class="c-customer-satisfaction-input__container">
<form class="c-customer-satisfaction-input__form">
<h3 class="c-customer-satisfaction-input__heading">How was your experience today?</h3>
<fieldset class="c-customer-satisfaction-input__fieldset c-customer-satisfaction-input__field" id="csat-radios-2" name="csat-radios" invalid="" aria-describedby="csat-radios-error-2" required="" autocomplete="off">
<legend class="c-customer-satisfaction-input__visually-hidden">Rating. A scale of 5 feelings conveyed using images that range from awful to great. The feelings represent how you feel about your experience today.</legend>
<small class="c-customer-satisfaction-input__error" id="csat-radios-error-2">
<span class="c-customer-satisfaction-input__error-icon">
<svg id="csat-error-icon-2" viewBox="0 0 18 18" aria-hidden="true" focusable="false"><path d="m9 0c4.9705627 0 9 4.02943725 9 9 0 4.9705627-4.0294373 9-9 9-4.97056275 0-9-4.0294373-9-9 0-4.97056275 4.02943725-9 9-9zm2.8630343 4.71100931-2.8630343 2.86303426-2.86303426-2.86303426c-.39658757-.39658757-1.03281091-.39438847-1.4265779-.00062147-.39651227.39651226-.39348876 1.03246767.00062147 1.4265779l2.86303426 2.86303426-2.86303426 2.8630343c-.39658757.3965875-.39438847 1.0328109-.00062147 1.4265779.39651226.3965122 1.03246767.3934887 1.4265779-.0006215l2.86303426-2.8630343 2.8630343 2.8630343c.3965875.3965876 1.0328109.3943885 1.4265779.0006215.3965122-.3965123.3934887-1.0324677-.0006215-1.4265779l-2.8630343-2.8630343 2.8630343-2.86303426c.3965876-.39658757.3943885-1.03281091.0006215-1.4265779-.3965123-.39651227-1.0324677-.39348876-1.4265779.00062147z" fill="currentColor" fill-rule="evenodd"></path></svg>
</span>
Please select one rating
</small>
<div class="c-customer-satisfaction-input__pictographic-radios">
<div class="c-customer-satisfaction-input__label c-customer-satisfaction-input__label--wrapper">
<input class="c-customer-satisfaction-input__input c-customer-satisfaction-input__visually-hidden" type="radio" id="csat-radio-awful-2" name="csat-radio-input" value="1" required="" autocomplete="off" data-customer-satisfaction-input="radio">
<label for="csat-radio-awful-2" class="c-customer-satisfaction-input__label c-customer-satisfaction-input__label--pictographic-radio">
<svg viewBox="0 0 24 24" fill="transparent" stroke="currentColor" aria-hidden="true" focusable="false"><clipPath id="csat-svg-ref-a-2"><path d="M24 0v24H0V0z"></path></clipPath><g stroke-width="1.8" clip-path="url(#csat-svg-ref-a-2)"><path d="M12 22c5.5228475 0 10-4.4771525 10-10S17.5228475 2 12 2 2 6.4771525 2 12s4.4771525 10 10 10z" stroke-miterlimit="10"></path><g stroke-linecap="round"><path d="M8 17c.5-5.33333333 7.5-5.33333333 8 0z" stroke-linejoin="round"></path><path d="m9 9-2 1M17 10l-2-1" stroke-miterlimit="10"></path></g></g></svg>
<span class="c-customer-satisfaction-input__visually-hidden">An image of a cartoon face that is very unhappy.</span>
<span><span class="c-customer-satisfaction-input__visually-hidden"> The value of this radio input is: </span>Awful</span>
</label>
</div>
<div class="c-customer-satisfaction-input__label c-customer-satisfaction-input__label--wrapper">
<input class="c-customer-satisfaction-input__input c-customer-satisfaction-input__visually-hidden" type="radio" id="csat-radio-bad-2" name="csat-radio-input" value="2" required="" autocomplete="off" data-customer-satisfaction-input="radio">
<label for="csat-radio-bad-2" class="c-customer-satisfaction-input__label c-customer-satisfaction-input__label--pictographic-radio">
<svg fill="transparent" stroke="currentColor" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><defs><clipPath id="csat-svg-ref-b-2"><path d="M24 0v24H0V0h24Z"></path></clipPath><clipPath id="csat-svg-ref-c-2"><path d="M1 0c.6 0 1 .4 1 1v2a1 1 0 1 1-2 0V1c0-.6.4-1 1-1Z"></path></clipPath></defs><g clip-path="url(#csat-svg-ref-b-2)"><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.8" stroke-linejoin="round" d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z"></path><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.8" stroke-linejoin="round" d="M9 17c1-2.7 5-2.7 6 0"></path><g clip-path="url(#csat-svg-ref-c-2)" transform="translate(8 8)"><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="round" d="M0 0h2v4H0V0z"></path></g><g clip-path="url(#csat-svg-ref-c-2)" transform="translate(14 8)"><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="round" d="M0 0h2v4H0V0z"></path></g></g></svg>
<span class="c-customer-satisfaction-input__visually-hidden">An image of a cartoon face with a frown.</span>
<span><span class="c-customer-satisfaction-input__visually-hidden"> The value of this radio input is: </span>Bad</span>
</label>
</div>
<div class="c-customer-satisfaction-input__label c-customer-satisfaction-input__label--wrapper">
<input class="c-customer-satisfaction-input__input c-customer-satisfaction-input__visually-hidden" type="radio" id="csat-radio-ok-2" name="csat-radio-input" value="3" required="" autocomplete="off" data-customer-satisfaction-input="radio">
<label for="csat-radio-ok-2" class="c-customer-satisfaction-input__label c-customer-satisfaction-input__label--pictographic-radio">
<svg fill="transparent" stroke="currentColor" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><defs><clipPath id="csat-svg-ref-d-2"><path d="M24 0v24H0V0h24Z"></path></clipPath><clipPath id="csat-svg-ref-e-2"><path d="M1 0c.6 0 1 .4 1 1v2a1 1 0 1 1-2 0V1c0-.6.4-1 1-1Z"></path></clipPath></defs><g clip-path="url(#csat-svg-ref-d-2)"><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.8" stroke-linejoin="round" d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z"></path><g clip-path="url(#csat-svg-ref-e-2)" transform="translate(8 8)"><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="round" d="M0 0h2v4H0V0z"></path></g><g clip-path="url(#csat-svg-ref-e-2)" transform="translate(14 8)"><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="round" d="M0 0h2v4H0V0z"></path></g><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.8" stroke-linejoin="round" d="M9 16h6"></path></g></svg>
<span class="c-customer-satisfaction-input__visually-hidden">An image of a cartoon face with a neutral expression.</span>
<span><span class="c-customer-satisfaction-input__visually-hidden"> The value of this radio input is: </span>OK</span>
</label>
</div>
<div class="c-customer-satisfaction-input__label c-customer-satisfaction-input__label--wrapper">
<input class="c-customer-satisfaction-input__input c-customer-satisfaction-input__visually-hidden" type="radio" id="csat-radio-good-2" name="csat-radio-input" value="4" required="" autocomplete="off" data-customer-satisfaction-input="radio">
<label for="csat-radio-good-2" class="c-customer-satisfaction-input__label c-customer-satisfaction-input__label--pictographic-radio">
<svg fill="transparent" stroke="currentColor" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><defs><clipPath id="csat-svg-ref-f-2"><path d="M24 0v24H0V0h24Z"></path></clipPath><clipPath id="csat-svg-ref-g-2"><path d="M1 0c.6 0 1 .4 1 1v2a1 1 0 1 1-2 0V1c0-.6.4-1 1-1Z"></path></clipPath></defs><g clip-path="url(#csat-svg-ref-f-2)"><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.8" stroke-linejoin="round" d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z"></path><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.8" stroke-linejoin="round" d="M9 15c1 2.7 5 2.7 6 0"></path><g clip-path="url(#csat-svg-ref-g-2)" transform="translate(8 8)"><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="round" d="M0 0h2v4H0V0z"></path></g><g clip-path="url(#csat-svg-ref-g-2)" transform="translate(14 8)"><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="round" d="M0 0h2v4H0V0z"></path></g></g></svg>
<span class="c-customer-satisfaction-input__visually-hidden">An image of a cartoon face with a smile.</span>
<span><span class="c-customer-satisfaction-input__visually-hidden"> The value of this radio input is: </span>Good</span>
</label>
</div>
<div class="c-customer-satisfaction-input__label c-customer-satisfaction-input__label--wrapper">
<input class="c-customer-satisfaction-input__input c-customer-satisfaction-input__visually-hidden" type="radio" id="csat-radio-great-2" name="csat-radio-input" value="5" required="" autocomplete="off" data-customer-satisfaction-input="radio">
<label for="csat-radio-great-2" class="c-customer-satisfaction-input__label c-customer-satisfaction-input__label--pictographic-radio">
<svg fill="transparent" stroke="currentColor" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><defs><clipPath id="csat-svg-ref-h-2"><path d="M24 0v24H0V0h24Z"></path></clipPath></defs><g clip-path="url(#csat-svg-ref-h-2)"><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.8" stroke-linejoin="round" d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z"></path><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.8" stroke-linejoin="round" d="M17.5 10v-.5a1.7 1.7 0 0 0-3.5 0v.5M10 10v-.5a1.7 1.7 0 0 0-3.5 0v.5M8 14c.5 5 7.5 5 8 0H8Z"></path></g></svg>
<span class="c-customer-satisfaction-input__visually-hidden">An image of a cartoon face with an open mouth grin.</span>
<span><span class="c-customer-satisfaction-input__visually-hidden"> The value of this radio input is: </span>Great</span>
</label>
</div>
</div>
</fieldset>
<button class="c-customer-satisfaction-input__button" type="submit">Send feedback</button>
<div class="u-hide" data-customer-satisfaction-input="submit-message">
<div class="c-customer-satisfaction-input__submit-message-container">
<svg id="csat-tick-icon-2" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z"></path><path d="M15 5.5a1 1 0 0 0-.8.4l-5.4 6-3.1-2.6a1 1 0 0 0-1.5.1 1 1 0 0 0 .2 1.5l3.9 3.4c.4.3 1 .3 1.4-.1l6-7c.4-.4.4-1 0-1.5a1 1 0 0 0-.8-.2Z" fill="#fff"></path></svg>
<p class="c-customer-satisfaction-input__submit-message">Thank you for your feedback.</p>
</div>
<a class="c-customer-satisfaction-input__link" href="https://www.surveymonkey.co.uk/r/G3MBJPQ" data-customer-satisfaction-input="survey-link" target="_blank" rel="noopener">Tell us why (opens in a new tab)</a>
</div>
</form>
</div>
</aside>
</div>
<div class="c-page-layout__sidebar c-page-layout__container">
<h2>Sidebar content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta, nunc vel dignissim pulvinar, turpis sem sodales nibh, sed tincidunt quam dui ac lectus. Fusce tempor tempor elit, a finibus tellus vulputate non. In at felis vitae urna vestibulum gravida. Nam sed justo massa. Sed nec facilisis sem, sed eleifend.</p>
<p>Sed euismod libero in est dignissim placerat. Cras in ipsum sit amet diam malesuada convallis hendrerit vel tortor.</p>
<aside class="u-hide u-js-show c-customer-satisfaction-input" data-customer-satisfaction-input="" data-customer-satisfaction-input-user-journeys="get prepared to publish">
<div class="c-customer-satisfaction-input__container">
<form class="c-customer-satisfaction-input__form">
<h3 class="c-customer-satisfaction-input__heading">How was your experience today?</h3>
<fieldset class="c-customer-satisfaction-input__fieldset c-customer-satisfaction-input__field" id="csat-radios-1" name="csat-radios" invalid="" aria-describedby="csat-radios-error-1" required="" autocomplete="off">
<legend class="c-customer-satisfaction-input__visually-hidden">Rating. A scale of 5 feelings conveyed using images that range from awful to great. The feelings represent how you feel about your experience today.</legend>
<small class="c-customer-satisfaction-input__error" id="csat-radios-error-1">
<span class="c-customer-satisfaction-input__error-icon">
<svg id="csat-error-icon-1" viewBox="0 0 18 18" aria-hidden="true" focusable="false"><path d="m9 0c4.9705627 0 9 4.02943725 9 9 0 4.9705627-4.0294373 9-9 9-4.97056275 0-9-4.0294373-9-9 0-4.97056275 4.02943725-9 9-9zm2.8630343 4.71100931-2.8630343 2.86303426-2.86303426-2.86303426c-.39658757-.39658757-1.03281091-.39438847-1.4265779-.00062147-.39651227.39651226-.39348876 1.03246767.00062147 1.4265779l2.86303426 2.86303426-2.86303426 2.8630343c-.39658757.3965875-.39438847 1.0328109-.00062147 1.4265779.39651226.3965122 1.03246767.3934887 1.4265779-.0006215l2.86303426-2.8630343 2.8630343 2.8630343c.3965875.3965876 1.0328109.3943885 1.4265779.0006215.3965122-.3965123.3934887-1.0324677-.0006215-1.4265779l-2.8630343-2.8630343 2.8630343-2.86303426c.3965876-.39658757.3943885-1.03281091.0006215-1.4265779-.3965123-.39651227-1.0324677-.39348876-1.4265779.00062147z" fill="currentColor" fill-rule="evenodd"></path></svg>
</span>
Please select one rating
</small>
<div class="c-customer-satisfaction-input__pictographic-radios">
<div class="c-customer-satisfaction-input__label c-customer-satisfaction-input__label--wrapper">
<input class="c-customer-satisfaction-input__input c-customer-satisfaction-input__visually-hidden" type="radio" id="csat-radio-awful-1" name="csat-radio-input" value="1" required="" autocomplete="off" data-customer-satisfaction-input="radio">
<label for="csat-radio-awful-1" class="c-customer-satisfaction-input__label c-customer-satisfaction-input__label--pictographic-radio">
<svg viewBox="0 0 24 24" fill="transparent" stroke="currentColor" aria-hidden="true" focusable="false"><clipPath id="csat-svg-ref-a-1"><path d="M24 0v24H0V0z"></path></clipPath><g stroke-width="1.8" clip-path="url(#csat-svg-ref-a-1)"><path d="M12 22c5.5228475 0 10-4.4771525 10-10S17.5228475 2 12 2 2 6.4771525 2 12s4.4771525 10 10 10z" stroke-miterlimit="10"></path><g stroke-linecap="round"><path d="M8 17c.5-5.33333333 7.5-5.33333333 8 0z" stroke-linejoin="round"></path><path d="m9 9-2 1M17 10l-2-1" stroke-miterlimit="10"></path></g></g></svg>
<span class="c-customer-satisfaction-input__visually-hidden">An image of a cartoon face that is very unhappy.</span>
<span><span class="c-customer-satisfaction-input__visually-hidden"> The value of this radio input is: </span>Awful</span>
</label>
</div>
<div class="c-customer-satisfaction-input__label c-customer-satisfaction-input__label--wrapper">
<input class="c-customer-satisfaction-input__input c-customer-satisfaction-input__visually-hidden" type="radio" id="csat-radio-ba