feat(basic card component): added basic card component

affects: @buildit/gravity-ui-web

added basic card component and refactored list-img-cards to use it

packages/gravity-ui-nunjucks/src/_patterns/02-molecules/02-lists/02-list-img-cards.md

@@ -1,3 +1,3 @@
 ## Purpose
 
-This is a generic list of cards that are composed of an image a title and some description. The content of each card is center-aligned and each card is flex aligned in a way that tries to minimise the amount of vertical space required.
+This is a generic list of basic cards.

packages/gravity-ui-nunjucks/src/_patterns/02-molecules/02-lists/02-list-img-cards.njk

@@ -2,15 +2,15 @@
 
 {%- from 'atoms-image' import image -%}
 
+{%- from 'molecules-card-basic' import cardBasic -%}
+
 {#
   Extend the unordered-list's unorderedListItem block
   to insert a card
 #}
 {%- block unorderedListItem -%}
   <li>
-    {{ image(item.image.src, item.image.alt, item.image.class) | safe }}
-    <h3 class="grav-c-list-img-cards__title">{{item.title}}</h3>
-    <p>{{item.content}}</p>
+    {{ cardBasic(item.title, item.image, item.content) | safe }}
   </li>
 {% endblock -%}
 

packages/gravity-ui-nunjucks/src/_patterns/02-molecules/04-cards/00-card-basic.json

@@ -0,0 +1,9 @@
+{
+  "title": "Basic cards have a title",
+  "img": {
+    "src": "../../images/img-random-1.png",
+    "alt": "Brief description of this fascinating image"
+  },
+  "content": "Space for a paragraph of text is ideal for when you need space for a paragraph of text.",
+  "href": "#"
+}

packages/gravity-ui-nunjucks/src/_patterns/02-molecules/04-cards/00-card-basic.md

@@ -0,0 +1,5 @@
+## Purpose
+
+This is a generic card which is composed of an image, a title, some description and optionally some tags.
+
+There is also the option of an anchor wrapping the image `<img>` and title `<h3>` elements.

packages/gravity-ui-nunjucks/src/_patterns/02-molecules/04-cards/00-card-basic.njk

@@ -0,0 +1,13 @@
+{%- from 'atoms-image' import image -%}
+
+{%- macro cardBasic(title, img, content, href) -%}
+<div class="grav-c-card-basic">
+  {% if href %}<a href="{{ href }}">{% endif %}
+    {{ image(img.src, img.alt, img.class) | safe }}
+    <h3 class="grav-c-card-basic__title">{{ title }}</h3>
+  {% if href %}</a>{% endif %}
+  <p>{{ content }}</p>
+</div>
+{%- endmacro -%}
+
+{{ cardBasic(title, img, content, href) | safe }}

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

@@ -0,0 +1,10 @@
+.grav-c-card-basic {
+  &__title {
+    @include typi('large-text');
+    @include gravy-font('secondary');
+  }
+
+  p {
+    @include typi('small-text');
+  }
+}

packages/gravity-ui-web/src/sass/05-components/03-organisms/_list-img-cards.scss

@@ -12,8 +12,6 @@
   }
 
   > li {
-    text-align: center;
-
     @media all and (min-width: $breakpoint-1) {
       max-width: 50%;
       padding: 0 $grav-sp-l;
@@ -29,13 +27,4 @@
   > li + li {
     margin-top: $grav-sp-xl;
   }
-
-  &__title {
-    @include typi('large-text');
-    @include gravy-font('secondary');
-  }
-
-  p {
-    @include typi('small-text');
-  }
 }

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

@@ -7,3 +7,4 @@
 @import 'list-image-links';
 @import 'two-columns-block';
 @import 'hero';
+@import 'card-basic';