Add figure label

source/patterns/01-molecules/figure/figure.twig

@@ -1,9 +1,23 @@
 {%- import 'atoms-html' as html -%}
 
 {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['figure']) }) -%}
-
 <figure {{- html.attributes(attributes|default({})) }}>
 
+{%- set figurePanel = figurePanel|default({})|merge({class: figurePanel.class|default([])|merge(['figure__header-panel']) }) -%}
+  <div {{- html.attributes(figurePanel) }}>
+
+    {%- set figureLabel = figureLabel|default({})|merge({class: figureLabel.class|default([])|merge(['figure__header-text']) }) -%}
+    <div {{- html.attributes(figureLabel) }}>
+      Figure 1
+    </div>
+
+    {%- set figureAccess = figureAccess|default({})|merge({class: figureAccess.class|default([])|merge(['figure__header-access']) }) -%}
+    <div {{- html.attributes(figureAccess) }}>
+      <a href="" class="figure__header-access_open-link "></a>
+    </div>
+
+  </div>
+
   {%- with content.arguments|merge({_template: content.template}) only -%}
     {%- block content -%}
 

source/patterns/01-molecules/figure/figure~en-caption.yaml

@@ -1,6 +1,7 @@
 content:
   template: atoms-image
   arguments:
+    figureLabel: test
     image:
       src: https://picsum.photos/600/400
       alt: ''

source/sass/mixins/_decorations.scss

@@ -15,3 +15,16 @@
   }
 
 }
+
+@mixin header_button {
+  @include margin(0, block-end);
+  border-radius: 3px;
+  display: block;
+  height: 28px;
+  margin-right: -1px; // stylelint-disable-line csstools/use-logical
+  width: 28px;
+
+  @supports (margin-right: -1px) {
+    margin-inline-end: -1px;
+  }
+}

source/sass/patterns/molecules/figure.scss

@@ -1,11 +1,50 @@
+
+@import "../../mixins/decorations";
+@import "../../mixins/scale";
 @import "../../mixins/spacing";
 @import "../../mixins/typography";
 @import "../../patterns/atoms/image";
 @import "../../settings/baselinegrid";
 @import "../../settings/breakpoint";
+@import "../../settings/color";
+@import "../../settings/font";
+@import "../../vendor/sass-mq/_mq";
 
 .figure {
-  @include block-spacing($start: $baselinegrid-space-medium, $end: $baselinegrid-space-medium);
+  @include block-spacing($start: 0, $end: $baselinegrid-space-medium);
+}
+
+.figure__header-panel {
+  @include block-spacing($start: $baselinegrid-space-medium, $end: $baselinegrid-space-extra_small);
+  display: grid;
+  grid-template-columns: 50% 50%;
+}
+
+.figure__header-text {
+  @include set-font-size-and-line-height(scale(-1));
+  font-family: $font-secondary;
+  font-weight: bold;
+}
+
+.figure__header-access {
+  text-align: end;
+}
+
+.figure__header-access_open-link {
+  @include header_button();
+  border: 1px solid $color-text-dividers;
+  background: url("../../../images/launch.png") 50% 50% no-repeat;
+  background: url("../../../images/launch.svg") 50% 50% no-repeat, linear-gradient(transparent, transparent);
+  margin-inline-end: -1px;
+  float: right; // stylelint-disable-line csstools/use-logical
+  &:hover {
+    background: url("../../../images/launch-hover.png") 50% 50% no-repeat;
+    background: url("../../../images/launch-hover.svg") 50% 50% no-repeat, linear-gradient(transparent, transparent);
+  }
+
+  @supports (float: inline-end) {
+    float: inline-end;
+  }
 }
 
 .figure__heading {