Skip to content
Snippets Groups Projects
Commit c6721f24 authored by Martin Leblanc's avatar Martin Leblanc Committed by Eric Bremner
Browse files

inital pattern for grid term card view

parent 7b0c2f2a
No related branches found
No related tags found
2 merge requests!63Tag 3.0.1,!62Feature/istwcms 4619 m26lebla theme blog news events listing pages
Hide whitespace changes
Inline Side-by-side
Showing
with 306 additions and 0 deletions
source/_patterns/04-components/content-grid-list/_content-grid-list.scss 0 → 100644
+ 0
− 0
View file @ c6721f24
source/_patterns/04-components/content-grid-list/content-grid-list.js 0 → 100644
+ 0
− 0
View file @ c6721f24
source/_patterns/04-components/content-grid-list/content-grid-list.md 0 → 100644
+ 0
− 0
View file @ c6721f24
source/_patterns/04-components/content-grid-list/content-grid-list.twig 0 → 100644
+ 29
− 0
View file @ c6721f24
{% set grid_modifier_classes = 'l-grid--3col' %}
{% embed '@layouts/grid/grid.twig' with {
'modifier_classes': grid_modifier_classes
} %}
{% block content %}
{% for item in lists %}
{% include "@components/card/card.twig" with {
modifier_classes: item.modifier_classes,
title: item.title,
url: item.url,
footer: item.footer,
date: item.date,
date_format: item.date_format,
read_more: item.read_more,
tags: item.tags,
tag_type: item.tag_type,
sources: item.sources,
img_element: item.img_element,
alt: item.alt,
content: item.content,
show_hover: 'true'
} %}
{% endfor %}
{% if content %}
{{ content }}
{% endif %}
{% endblock %}
{% endembed %}
source/_patterns/04-components/content-grid-list/content-grid-list.yml 0 → 100644
+ 277
− 0
View file @ c6721f24
modifier_classes: ''
content:
lists:
-
title: 'Blog Teaser title 1'
url: '#'
date:
- 'Friday, September 18, 2020'
author_name: 'Author Lastname'
author_link: '#'
tags:
- url: '#'
title: 'Tag 1'
- url: '#'
title: 'Tag 2'
- url: '#'
title: 'Tag 3'
- url: '#'
title: 'Tag 4'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
read_more: true
show_hover: true
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'Blog Teaser title 2'
url: '#'
date:
- 'Friday, September 18, 2020'
author_name: 'Author Lastname'
author_link: '#'
tags:
- url: '#'
title: 'Tag 1'
- url: '#'
title: 'Tag 2'
- url: '#'
title: 'Tag 3'
- url: '#'
title: 'Tag 4'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
read_more: true
show_hover: true
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'Blog Teaser title 3'
url: '#'
date:
- 'Friday, September 18, 2020'
author_name: 'Author Lastname'
author_link: '#'
tags:
- url: '#'
title: 'Tag 1'
- url: '#'
title: 'Tag 2'
- url: '#'
title: 'Tag 3'
- url: '#'
title: 'Tag 4'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
read_more: true
show_hover: true
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'News Teaser title 1'
url: '#'
date:
- 'Sep. 18, 2020'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
read_more: true
show_hover: true
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'News Teaser title 2'
url: '#'
date:
- 'Sep. 18, 2020'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
read_more: true
show_hover: true
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'News Teaser title 3'
url: '#'
date:
- 'Sep. 18, 2020'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
read_more: true
show_hover: true
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'Event Teaser title 1'
url: '#'
date:
- 'Friday, September 18, 2020 2:20- 4:20 PM EDT'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
read_more: true
show_hover: true
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'Event Teaser title 2'
url: '#'
date:
- 'Friday, September 18, 2020 2:20- 4:20 PM EDT'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'Event Teaser title 3'
url: '#'
date:
- 'Friday, September 18, 2020 2:20- 4:20 PM EDT'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
read_more: true
show_hover: true
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment