@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/themes/cr/2019/components/typography/_typography.scss

@@ -0,0 +1,188 @@
+h1, h2, h3, h4, h5 { 
+  text-transform: uppercase;
+  font-family: $anton;
+  strong {
+    font-family: inherit;
+  }
+}
+
+p, span {
+  font-family: $montserrat;
+  strong {
+    font-family: inherit;
+  }
+}
+
+p:last-child {
+  margin: 0;
+}
+
+/* Override base theme variations, to make current content 'work' on some level */
+h1 {
+  margin-bottom: 30px;
+
+  &.font--font-black,
+  &.font--xlarge,
+  &.font--black-shadow  {
+    @include font-size($h1-font-size);
+  }
+}
+
+h2,
+h3,
+p.text--subtitle {
+  margin-bottom: 20px;
+}
+
+p {
+  &.font--xlarge,
+  &.font--large,
+  &.font--small,
+  &.font--xsmall {
+    @include font-size($p-font-size);
+  }
+}
+
+h1.text--title {
+  @include font-size($h1-title-font-size);
+  margin-bottom: 30px;
+}
+
+h1, h2, h3, h4, h5, p, span {
+  &.font {
+    &--red,
+    &--royal-blue,
+    &--dark-purple,
+    &--purple,
+    &--black,
+    &--dark-grey,
+    &--grey  {
+      color: $colour-dark-purple;
+    }
+
+    &--mint-green,
+    &--white,
+    &--light-grey {
+      color: $colour-white;
+    }
+  }
+}
+
+
+/* 2019 Classes .. to be used via Sass @extends, not as standalone WYSIWYG classes */
+.text--subtitle,
+.text--subtitle-small,
+.text--label,
+.text--label-small {
+  font-family: $montserrat;
+  font-weight: 800;
+  strong {
+    font-weight: inherit;
+  }
+}
+
+.text--footnote {
+  font-family: $montserrat;
+  font-weight: 500;
+  strong {
+    font-weight: 700;
+  }
+}
+
+.text--body {
+  @include font-size($body-font-size);
+}
+.text--body-small {
+  @include font-size($body-small-font-size);
+}
+.text--subtitle {
+  @include font-size($subtitle-font-size);
+}
+.text--subtitle-small {
+  @include font-size($subtitle-small-font-size);
+  margin-bottom: 15px;
+}
+.text--label {
+  @include font-size($label-font-size);
+  text-transform: uppercase;
+}
+.text--label-small {
+  @include font-size($label-small-font-size);
+  text-transform: uppercase;
+}
+.text--footnote {
+  @include font-size($footnote-font-size);
+}
+
+/* Backwards mapping so our existing content in the CMS doesn't look too wonky */
+i.font--family-black,
+.font--family-black, 
+i.font--family-bold, 
+.font--family-bold {
+  font-family: $montserrat;
+  font-weight: 800;
+  text-transform: unset;
+}
+
+i.font--family-regular,
+.font--family-regular,
+.font--family-medium,
+i.font--family-medium {
+  font-family: $montserrat;
+  font-weight: 700;
+  text-transform: unset;
+}
+
+.font--family-light,
+i.font--family-light {
+  font-family: $montserrat;
+  font-weight: 500;
+  text-transform: unset;
+}
+
+label {
+  @extend .text--label;
+}
+
+/* Used to strongarm styles for Membership page,
+ * overriding general bg-color/font-color rules */
+.font--white { color: $colour-white !important; }
+.font--red { color: $colour-red !important; }
+.font--deep-violet { color: $colour-deep-violet !important; }
+.font--grey { color: $colour-grey !important; }
+.font--coral { color: $colour-coral !important; }
+.font--orange { color: $colour-orange !important; }
+.font--yellow { color: $colour-yellow !important; }
+.font--green { color: $colour-green !important; }
+.font--blue { color: $colour-blue !important; }
+.font--magenta { color: $colour-magenta !important; }
+.font--purple { color: $colour-purple !important; }
+.font--teal { color: $colour-teal !important; }
+
+
+/* Per breakpoint tweaks for Membership */
+.no-wrap--md-lg {
+  @include breakpoint($screen-md) {
+    white-space: nowrap;
+  }
+}
+
+.no-wrap--lg {
+  @include breakpoint($screen-lg) {
+    white-space: nowrap;
+  }
+}
+
+br.break--md-lg {
+  display: none;
+  @include breakpoint($screen-md) {
+    display: inline;
+  }
+}
+
+br.break--lg {
+  display: none;
+  @include breakpoint($screen-lg) {
+    display: inline;
+  }
+}

package/src/sass/themes/cr/2019/components/typography/typography.twig

@@ -0,0 +1,128 @@
+<style>
+.breakpoint-lg, .breakpoint-md{display:none}
+.breakpoint-sm{display:inline-block}
+@media (min-width: 740px){
+  .breakpoint-md{display:inline-block}
+  .breakpoint-sm, .breakpoint-lg {display:none}
+}
+@media (min-width: 1024px){
+  .breakpoint-lg {display:inline-block}
+  .breakpoint-sm, .breakpoint-md{display:none}
+}
+</style>
+<p>Comic Relief uses Montserrat and Anton; the latter for headings, the former of body copy, labels etc.</p>
+
+<h1>Fonts</h1>
+<br/>
+<br/>
+<h3>Type Sizes</h3>
+<p>All type sizes and line heights come from a typographic scale, using multiples of 8.</p>
+<br/>
+<br/>
+<h3>Headings</h3>
+<p>There are a range of heading sizes from H1 to H3, using the font size and line height. According to the typographic scale set the heading change sizes responsively for different media devices.</p>
+
+<h1 class="text--title">'Title' Header 1</h1>
+  <span class="font--red"><b>.text--title</b> (Used for headers and landing pages, noted as 'Title' H1 in the Design System)</span><br/>
+  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 100px / line-height: 104px</span>
+  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 100px / line-height: 104px</span>
+  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 54px / line-height: 62px</span>
+<br/>
+<br/>
+<br/>
+
+<h1>Header 1</h1>
+ <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 64px / line-height: 72px</span>
+ <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 64px / line-height: 72px</span>
+ <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 42px / line-height: 48px</span>
+<br/>
+<br/>
+<br/>
+
+<h2>Header 2</h2>
+  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 42px / line-height: 48px</span>
+  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 42px / line-height: 48px</span>
+  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 34px / line-height: 40px</span>
+<br/>
+<br/>
+<br/>
+
+<h3>Header 3</h3>
+  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 26px / line-height: 32px</span>
+  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 26px / line-height: 32px</span>
+  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 26px / line-height: 32px</span>
+<br/>
+<br/>
+<br/>
+<br/>
+
+<h3>Copy, labels etc.</h3>
+
+<p>I am a standard paragraph, also p.text--body for CMS reasons: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<span class="font--red"><b>Standard paragraph, p.text--body </b></span><br/>
+<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 20px / line-height: 32px</span>
+<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 20px / line-height: 32px</span>
+<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 15px / line-height: 24px</span>
+<br/>
+<br/>
+<br/>
+<br/>
+
+<p class="text--body-small">I am a small paragraph, p.text--body-small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<span class="font--red"><b>Standard paragraph, p.text--body-small </b></span><br/>
+<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 15px / line-height: 24px</span>
+<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 15px / line-height: 24px</span>
+<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 15px / line-height: 24px</span>
+<br/>
+<br/>
+<br/>
+<br/>
+
+<p class="text--subtitle">I am a Subtitle: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<span class="font--red"><b>'Subtitle' .text--subtitle</b></span><br/>
+<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 36px / line-height: 48px</span>
+<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 36px / line-height: 48px</span>
+<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 27px / line-height: 40px</span>
+</p>
+<br/>
+<br/>
+<br/>
+
+<p class="text--subtitle-small">I am a Subtitle Small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<span class="font--red"><b>'Subtitle small' .text--subtitle--small</b></span><br/>
+<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 36px / line-height: 48px</span>
+<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 36px / line-height: 48px</span>
+<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 27px / line-height: 40px</span>
+</p>
+<br/>
+<br/>
+<br/>
+
+<p class="text--label">I am a Label: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<span class="font--red"><b>'Label' .text--label</b></span><br/>
+<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 15px / line-height: 24px</span>
+<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 15px / line-height: 24px</span>
+<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
+<br/>
+<br/>
+<br/>
+
+<p class="text--label">I am a Label Small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<span class="font--red"><b>'Label' .text--label</b></span><br/>
+<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 11px / line-height: 16px</span>
+<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 11px / line-height: 16px</span>
+<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
+<br/>
+<br/>
+<br/>
+
+
+<p class="text--footnote">I am a Footnote: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<span class="font--red"><b>'Footnote' .text--footnote</b><br/></span>
+<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 11px / line-height: 16px</span>
+<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 11px / line-height: 16px</span>
+<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
+<br/>
+<br/>
+<br/>
+

package/src/sass/themes/cr/2019/cr19.scss

@@ -0,0 +1,104 @@
+// ==========================================================================
+// Core components
+// ==========================================================================
+@import "../../../base/core/base-1-mixins";
+@import "../../../base/core/base-breakpoints";
+@import "../../../base/core/base-common";
+@import "../../../base/core/base-grid";
+@import "../../../base/core/base-helper";
+@import "../../../base/core/base-layout";
+@import "../../../base/core/base-reset";
+
+// ==========================================================================
+// Core variables
+// ==========================================================================
+
+@import "../../../base/variables/_grid.scss";
+@import "../../../base/variables/_colours.scss";
+@import "../../../base/variables/_typography.scss";
+@import "../../../base/variables/_lists.scss";
+@import "../../../base/variables/_theme.scss";
+
+// ==========================================================================
+// Sub Theme variables
+// ==========================================================================
+
+@import "variables/_colours.scss";
+@import "variables/_typography.scss";
+@import "variables/_mixins.scss";
+
+// ==========================================================================
+// Core components
+// ==========================================================================
+
+// Increase max width
+$max-width: 1440px;
+
+// Tweak column-gutter ratio
+$susy: (  
+  columns: $columns,
+  container: $max-width,
+  gutters: 40px/60px,
+  global-box-sizing: border-box,
+  gutter-position: split,
+  output: float,
+  last-flow: to
+);
+
+// Or choose components one by one
+@import "../../../base/components/background-colours/background-colours";
+@import "../../../base/components/background-single-msg/background-single-msg";
+@import "../../../base/components/banners/card-banner";
+@import "../../../base/components/card-block/card";
+@import "../../../base/components/cards/cards";
+@import "../../../base/components/content-block/content-block";
+@import "../../../base/components/content-wall/content-wall";
+@import "../../../base/components/cookie-consent/cookie-consent";
+@import "../../../base/components/custom-block/custom-block";
+@import "../../../base/components/email-signup/email-signup-head";
+@import "../../../base/components/email-signup/email-signup";
+@import "../../../base/components/feature-articles-block/feature-articles-block";
+@import "../../../base/components/footer/footer";
+@import "../../../base/components/form/form";
+@import "../../../base/components/grid/grid";
+@import "../../../base/components/header/base-header";
+@import "../../../base/components/iframe-block/iframe-block";
+@import "../../../base/components/lightcase/lightcase";
+@import "../../../base/components/list/list";
+@import "../../../base/components/media-block/media-block";
+@import "../../../base/components/media/media";
+@import "../../../base/components/navigation/feature-nav";
+@import "../../../base/components/navigation/footer-nav";
+@import "../../../base/components/navigation/hamburger-menu-button";
+@import "../../../base/components/navigation/main-nav";
+@import "../../../base/components/news-article/news-article";
+@import "../../../base/components/news-article/press-release-article";
+@import "../../../base/components/news-overview/news";
+@import "../../../base/components/news-teaser/news-article-teaser";
+@import "../../../base/components/news-teaser/news-teaser";
+@import "../../../base/components/pagination/pagination";
+@import "../../../base/components/paragraph--cr-single-message-row/paragraph--cr-single-message-row";
+@import "../../../base/components/partners-row/partners-row";
+@import "../../../base/components/partners-grid/partners-grid";
+@import "../../../base/components/partners/partners";
+@import "../../../base/components/promo-header/promo-header";
+@import "../../../base/components/quote-block/content-wall-quote";
+@import "../../../base/components/related-articles/related-articles";
+@import "../../../base/components/search-results/search-result";
+@import "../../../base/components/search/search-block";
+@import "../../../base/components/selectbox/selectbox";
+@import "../../../base/components/social/social";
+@import "../../../base/components/table/table";
+@import "../../../base/components/teaser-block/teaser-block";
+@import "../../../base/components/tooltips/tooltips";
+@import "../../../base/components/typography/typography";
+@import "../../../base/components/views/views";
+@import "../../../base/components/just-in-time-block/_just-in-time";
+@import "../../../base/components/form/_standard-form.scss";
+
+// ==========================================================================
+// Sub theme components overrides
+// ==========================================================================
+@import "_cr19-styleguide.scss";
+@import "_cr19-components";
+@import "../../../base/components/postcode-lookup/_postcode-lookup";

package/src/sass/themes/cr/2019/form.twig

@@ -0,0 +1,133 @@
+<form novalidate>
+	<div id="field-wrapper--standard" class="form__fieldset form__field--wrapper form__field-wrapper--text">
+		<label id="field-label--standard" for="field-input--standard" class="form__field-label required">Input required with paragraph text and hint</label>
+		<p class="form-help-text">This is support text, for example information on how long the password should be</p>
+		<input 
+			type="text" 
+			id="field-input--standard" 
+			name="standard" 
+			class="form__field form__field--text" 
+			required="required" 
+			placeholder="This is hint text" 
+			pattern="" 
+			aria-describedby="field-label--standard"
+		>
+	</div>
+	<div id="field-wrapper--standard-error" class="form__fieldset form__field--wrapper form__field-wrapper--text">
+		<label id="field-label--firstname" for="field-input--firstname" class="form__field-label required">Input with error mesaage</label>
+		<input 
+			type="text" 
+			id="field-input--standard-error" 
+			name="firstname" 
+			class="form__field form__field--text form__field--error-outline" 
+			required="" 
+			placeholder="Field completed incorrectly" 
+			pattern="" 
+			aria-describedby="field-label--standard"
+		>
+		<div id="field-error--standard-error" class="form__field-error-container form__field-error-container--text" aria-live="assertive" role="status">
+			<span class="form-error">This is an error message</span>
+		</div>
+	</div>
+	<div id="field-wrapper--standard-optional" class="form__fieldset form__field--wrapper form__field-wrapper--text">
+		<label id="field-wrapper--standard-optional" for="field-input--standard" class="form__field-label">Simple input <span>(optional)</span></label>
+		<input 
+			type="text" 
+			id="field-wrapper--standard-optional" 
+			name="standard" 
+			class="form__field form__field--text error-border" 
+			placeholder="" 
+			pattern="" 
+			aria-describedby="field-label--standard"
+		>
+	</div>
+	<div class="form__field--wrapper form__choice form__field--select">
+		<label class="form__field form__field--country form__choice required" for="field-input--select">Dropdown menu</label>
+		<select 
+			id="field-input--select" 
+			name="select-1" 
+			class="form__field form__field--select"
+		> 
+			<option >Please select</option>
+			<option value="GB">United Kingdom</option>
+			<option disabled="disabled">-------------------</option>
+		</select>
+	</div>
+
+	<div class="form__field--wrapper form__choice form__field--select">
+		<label class="form__field form__field--country form__choice required" for="field-input--select">Dropdown menu</label>
+		<select 
+			id="field-input--select" 
+			name="select-2" 
+			class="form__field form__field--country form__field--error-outline"
+		> 
+			<option >Please select</option>
+			<option value="GB">United Kingdom</option>
+			<option disabled="disabled">-------------------</option>
+		</select>
+		</select>
+		<div class="form__field--error" aria-live="assertive" role="status">
+			<span class="form-error">This is a error message</span>
+		</div>
+	</div>
+	<div class="form__field--wrapper form__textarea">
+        <label class="form__texarea required" for="comicrelief_payin_general_permissionEmail require">Long copy/Message field</label>
+        <textarea class="form__field">This is text area</textarea>
+    </div>
+	<div class="form__field--wrapper form__textarea">
+        <label class="form__texarea required" for="comicrelief_payin_general_permissionEmail">Long copy/Message field</label>
+        <textarea class="form__field form__field--error-outline">This is text area</textarea>
+		<div class="form__field--error" aria-live="assertive" role="status">
+			<span class="form-error">This is a error message</span>
+		</div>
+    </div>
+	<div class="form__row form__field--wrapper form__field-wrapper--radio">
+		<p class="form__fieldset--label"> List of radio buttons </p>
+		<div class="form__field--wrapper form__radio form__radio--inline">
+			<label class="form__field-label" for="radio-1">Option 1</label>
+			<input type="radio" id="radio-1" name="radio-group" value="1" checked/>
+			<span></span>
+		</div>
+		<div class="form__field--wrapper form__radio form__radio--inline">
+			<label class="form__field-label" for="radio-2">Option 2</label>
+			<input type="radio" id="radio-2" name="radio-group" value="2" />
+			<span>&nbsp;</span>
+			<div class="form__fieldset form__field--wrapper form__field-additional-text">
+			 <div>
+			 	<p>Here's some additional text </p>
+			 	</div>
+			</div>
+		</div>
+	</div>
+	<div class="form__row form__field--wrapper form__field-wrapper--checkbox">
+		<p class="form__fieldset--label"> List of checkboxes </p>
+		<div class="form__field--wrapper form__checkbox form__checkbox--inline">
+			<label class="form__field-label" for="checkbox-1">Option 1</label>
+			<input type="checkbox" id="checkbox-1" name="group-checkbox" value="1" checked />
+			<span></span>
+		</div>
+		<div class="form__field--wrapper form__checkbox form__checkbox--inline">
+			<label class="form__field-label" for="checkbox-2">Option 2</label>
+			<input type="checkbox" id="checkbx-2" name="group-checkbox" value="2" />
+			<span></span>
+		</div>
+	</div>
+	<div class="form__field--wrapper form__field-wrapper--checkbox form__checkbox-paragraph">
+		<p class="form__fieldset--label">Single checkbox with paragraph text (optional)</p>
+		<p>This block also reiterates that we don’t use asterisks but the (optional) indication for fields that are not mandatory.</p>
+		<div class="form__checkbox--inline">
+			<label class="form__field-label" for="singlecheckbox">Option 1</label>
+			<input type="checkbox" id="singlecheckbox" name="singlecheckbox" value="1" />
+			<span></span>
+		</div>
+    </div>
+    <div class="form__field--wrapper form__field-wrapper--checkbox form__field-wrapper--background">
+        <div class="form__checkbox--inline">
+            <label class="form__field-label" for="singlecheckbox1">Single checkbox with background colour</label>
+            <input type="checkbox" id="singlecheckbox1" name="singlecheckbox1" value="2" />
+            <span></span>
+        </div>
+    </div>
+</div>
+
+</form>

package/src/sass/themes/cr/2019/variables/_colours.scss

@@ -0,0 +1,48 @@
+// CR Colours
+
+/* Primary */
+$colour-red: #E52630;
+$colour-deep-violet: #2C0230;
+$colour-white: #FFFFFF;
+
+/* Secondary */
+$colour-grey: #918791;
+$colour-coral: #F9686D;
+$colour-orange: #FF9144;
+$colour-yellow: #FFE400;
+$colour-green: #4ECD57;
+$colour-blue: #6489FC;
+$colour-magenta: #FC59CE;
+$colour-purple: #C180F9;
+$colour-teal: #22CFD8;
+
+/* Secondary light */
+$colour-light-grey: #F4F2F4;
+$colour-light-coral: #FFCECE;
+$colour-light-orange: #FEE3CC;
+$colour-light-yellow: #FEFD5A;
+$colour-light-green: #62EF74;
+$colour-light-blue: #8BACFE;
+$colour-light-magenta: #FEB4DC;
+$colour-light-purple: #DFC6F6;
+$colour-light-teal: #86E4E9;
+$colour-royal-blue-light: #584bfe;
+
+/* Secondary dark */
+$colour-dark-grey: #4B324E;
+$colour-dark-coral: #961D35;
+$colour-dark-orange: #984316;
+$colour-dark-yellow: #665700;
+$colour-dark-green: #1B651D;
+$colour-dark-blue: #274084;
+$colour-dark-magenta: #821C5D;
+$colour-dark-purple: #48276E;
+$colour-dark-teal: #13767C;
+
+// Overiding base variable
+$colour-black: $colour-deep-violet;
+
+// Membership colours
+$colour-donate-red: #E52630;
+$colour-donate-dark-red: $colour-dark-coral;
+$colour-donate-grey: #dadada;

package/src/sass/themes/cr/2019/variables/_mixins.scss

@@ -0,0 +1,44 @@
+// CR buttons variations, w/ default hover state colours
+@mixin cr_button_types($colour, $bg-colour, $hover-colour: $colour-red, $hover-text-colour: $colour-white) {
+  color: $colour;
+  background-color: $bg-colour;
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: $hover-colour;
+    color: $hover-text-colour;
+  }
+}
+
+// CR links variation
+@mixin link($border, $hover) {
+  // Set this to 'black' by default; will be overriding to white when used in certain contexts
+  color: $colour-deep-violet;
+  text-decoration: none;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  border-bottom: 2px solid $colour-deep-violet;
+  font-family: $montserrat;
+  font-size: 18px;
+  line-height: 28px;
+
+  &:hover,
+  &:active,
+  &:focus {
+    border-bottom: 2px solid $colour-deep-violet;
+    color: $colour-deep-violet;
+  }
+  &.inline {
+    font-size: inherit;
+    line-height: 14px;
+    border-bottom: 2px solid $colour-deep-violet;
+    &:hover {
+      border-bottom: 2px solid $colour-deep-violet;
+    }
+  }
+  &.link--small {
+    font-size: 18px;
+    line-height: 28px;
+  }
+}