-
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(callout): new callout organism component
affects: @buildit/gravity-ui-nunjucks, @buildit/gravity-ui-web
- Loading branch information
Showing
7 changed files
with
116 additions
and
9 deletions.
There are no files selected for viewing
14 changes: 9 additions & 5 deletions
14
...ravity-ui-nunjucks/src/_patterns/02-molecules/02-lists/05-three-column-list-justified.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 |
---|---|---|
@@ -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 -}} |
42 changes: 42 additions & 0 deletions
42
packages/gravity-ui-nunjucks/src/_patterns/03-organisms/00-page-structure/05-callout.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,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": "#" | ||
} | ||
] | ||
} |
3 changes: 3 additions & 0 deletions
3
.../gravity-ui-nunjucks/src/_patterns/03-organisms/00-page-structure/05-callout.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,3 @@ | ||
## Purpose | ||
|
||
Callout component meant to be displayed with a full bleed background image and list of links. |
10 changes: 10 additions & 0 deletions
10
packages/gravity-ui-nunjucks/src/_patterns/03-organisms/00-page-structure/05-callout.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,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> |
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
44 changes: 44 additions & 0 deletions
44
packages/gravity-ui-web/src/sass/05-components/03-organisms/_callout.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,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; | ||
} | ||
} |
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 |
---|---|---|
|
@@ -10,3 +10,4 @@ | |
@import 'hero'; | ||
@import 'card-basic'; | ||
@import 'copy-ostentatious'; | ||
@import 'callout'; |