feat(callout): new callout organism component

affects: @buildit/gravity-ui-nunjucks, @buildit/gravity-ui-web

packages/gravity-ui-nunjucks/src/_patterns/02-molecules/02-lists/05-three-column-list-justified.njk

@@ -1,5 +1,9 @@
-<ul class="grav-c-three-column-list-justified">
-  {% for item in list -%}
-    <li><a href="{{ item.link }}">{{ item.text }}</a></li>
-  {%- endfor %}
-</ul>
+{%- macro threeColumnListJustified(list) -%}
+  <ul class="grav-c-three-column-list-justified">
+    {% for item in list -%}
+      <li><a href="{{ item.link }}">{{ item.text }}</a></li>
+    {%- endfor %}
+  </ul>
+{%- endmacro -%}
+
+{{- threeColumnListJustified(list) | safe -}}

packages/gravity-ui-nunjucks/src/_patterns/03-organisms/00-page-structure/05-callout.json

@@ -0,0 +1,42 @@
+{
+  "text": "<strong>We're worldwide.</strong><br/>That's right next to you.",
+  "backgroundImage": "https://picsum.photos/id/135/1920/1080",
+  "links": [
+    {
+      "text": "Bangalore",
+      "link": "#"
+    },
+    {
+      "text": "Dallas",
+      "link": "#"
+    },
+    {
+      "text": "Denver",
+      "link": "#"
+    },
+    {
+      "text": "Dublin",
+      "link": "#"
+    },
+    {
+      "text": "Edinburgh",
+      "link": "#"
+    },
+    {
+      "text": "Gdansk",
+      "link": "#"
+    },
+    {
+      "text": "London",
+      "link": "#"
+    },
+    {
+      "text": "New York",
+      "link": "#"
+    },
+    {
+      "text": "Warsaw",
+      "link": "#"
+    }
+  ]
+}

packages/gravity-ui-nunjucks/src/_patterns/03-organisms/00-page-structure/05-callout.md

@@ -0,0 +1,3 @@
+## Purpose
+
+Callout component meant to be displayed with a full bleed background image and list of links.

packages/gravity-ui-nunjucks/src/_patterns/03-organisms/00-page-structure/05-callout.njk

@@ -0,0 +1,10 @@
+{%- from 'molecules-three-column-list-justified' import threeColumnListJustified -%}
+
+<div class="grav-c-callout">
+  <img src="{{ backgroundImage }}" />
+
+  <div class="grav-c-callout__columns">
+    <p>{{ text | safe }}</p>
+    {{- threeColumnListJustified(links) | safe -}}
+  </div>
+</div>

packages/gravity-ui-web/src/sass/05-components/02-molecules/02-lists/05-three-column-list-justified.scss

@@ -2,27 +2,30 @@
   padding: 0;
   list-style: none;
 
+  > li {
+    margin-top: 0.5rem;
+  }
+
   @media all and (min-width: grav-breakpoint(small)) {
     display: flex;
     flex-wrap: wrap;
     margin: 0;
 
     > li {
       width: 33.3%;
-      padding-right: $grav-sp-m;
+      padding-right: 0;
+      padding-left: 0;
       flex-grow: 1;
 
       &:nth-child(3n+2) {
-        padding-left: $grav-sp-m;
         text-align: center;
       }
 
       &:nth-child(3n) {
-        padding-right: 0;
-        padding-left: $grav-sp-m;
         text-align: right;
       }
 
+      &:nth-child(1),
       &:nth-child(2),
       &:nth-child(3) {
         margin-top: 0;

packages/gravity-ui-web/src/sass/05-components/03-organisms/_callout.scss

@@ -0,0 +1,44 @@
+.grav-c-callout {
+  position: relative;
+
+  p {
+    font-size: 1.5rem;
+    line-height: 100%;
+
+    @media all and (min-width: grav-breakpoint(small)) {
+      margin-right: 1.5em;
+    }
+
+    @media all and (min-width: grav-breakpoint(medium)) {
+      font-size: 2.25rem;
+    }
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    margin: 0;
+    object-fit: cover;
+    object-position: center;
+    z-index: -1;
+  }
+
+  .grav-c-callout__columns {
+    max-width: $grav-page-content-max-width;
+    margin: $grav-sp-vertical-gap auto;
+    padding: 0 $grav-sp-m;
+
+    @media all and (min-width: grav-breakpoint(small)) {
+      display: flex;
+      margin-bottom: $grav-sp-vertical-gap;
+      justify-content: space-between;
+    }
+  }
+
+  .grav-c-three-column-list-justified {
+    max-width: 18em;
+  }
+}

packages/gravity-ui-web/src/sass/05-components/03-organisms/_organisms.all.scss

@@ -10,3 +10,4 @@
 @import 'hero';
 @import 'card-basic';
 @import 'copy-ostentatious';
+@import 'callout';