-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
d8edea6
commit a183257
Showing
8 changed files
with
42 additions
and
15 deletions.
There are no files selected for viewing
2 changes: 1 addition & 1 deletion
2
...es/gravity-ui-nunjucks/src/_patterns/02-molecules/02-lists/02-list-img-cards.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 9 additions & 0 deletions
9
packages/gravity-ui-nunjucks/src/_patterns/02-molecules/04-cards/00-card-basic.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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": "#" | ||
} |
5 changes: 5 additions & 0 deletions
5
packages/gravity-ui-nunjucks/src/_patterns/02-molecules/04-cards/00-card-basic.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
13 changes: 13 additions & 0 deletions
13
packages/gravity-ui-nunjucks/src/_patterns/02-molecules/04-cards/00-card-basic.njk
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 }} |
10 changes: 10 additions & 0 deletions
10
packages/gravity-ui-web/src/sass/05-components/03-organisms/_card-basic.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
.grav-c-card-basic { | ||
&__title { | ||
@include typi('large-text'); | ||
@include gravy-font('secondary'); | ||
} | ||
|
||
p { | ||
@include typi('small-text'); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,3 +7,4 @@ | |
@import 'list-image-links'; | ||
@import 'two-columns-block'; | ||
@import 'hero'; | ||
@import 'card-basic'; |