diff --git a/source/_patterns/01-molecules/blocks/media-block.json b/source/_patterns/01-molecules/blocks/media-block.json index 513a8e878..1a373fe94 100644 --- a/source/_patterns/01-molecules/blocks/media-block.json +++ b/source/_patterns/01-molecules/blocks/media-block.json @@ -16,6 +16,7 @@ "date": "December 28, 2018", "description": "Mauris sit amet augue gravida, dignissim sem maximus, aliquam metus. Maecenas eu consectetur orci, id auctor dui.", "category": "Culture", - "url": "/" + "url": "/", + "caption": "Aliquam erat volutpat. Etiam dui dui, molestie et pulvinar eget, malesuada vitae dui. Nunc non est pulvinar, lacinia augue sit amet, efficitur libero." } } diff --git a/source/_patterns/01-molecules/blocks/media-block.twig b/source/_patterns/01-molecules/blocks/media-block.twig index dd346a072..44e5e6618 100644 --- a/source/_patterns/01-molecules/blocks/media-block.twig +++ b/source/_patterns/01-molecules/blocks/media-block.twig @@ -47,6 +47,9 @@ {% endif %} + {% if media_block_default.caption %} +
{{ media_block_default.caption }}
+ {% endif %} diff --git a/source/css/_objects.blocks.scss b/source/css/_objects.blocks.scss index 41028ebf2..5c55058eb 100644 --- a/source/css/_objects.blocks.scss +++ b/source/css/_objects.blocks.scss @@ -173,6 +173,14 @@ align-items: flex-end; } +.c-block__caption { + background-color: transparent; + background-image: linear-gradient(to bottom, rgba(0, 41, 56, 0), rgba(0, 41, 56, 0.9)); + position: absolute; + bottom: 0; + font-size: 90%; +} + /** * Block Variations */ @@ -237,6 +245,9 @@ display: block; margin-right: $space-mobile; } + .c-block__caption { + display: none; + } } }