Instantly share code, notes, and snippets.

View featured-movie.scss
View card.css
.card {
width: 300px;
background: #fff;
transition: box-shadow 0.3s ease-in-out;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
/* Add box shadow to entire card on hover */
.card:hover {
box-shadow: 0 1px 35px 0 rgba(0, 0, 0, 0.3);
View paragraph--card.html.twig
{# set a variable for social media icons
to later pass to the component template #}
set social = [
url: content.field_card_social_link.0['#url'].uri,
icon: content.field_card_social_link.0['#title'],
url: content.field_card_social_link.1['#url'].uri,
View movie-card.scss
.movie-card {
background: $color-black;
color: $color-white;
max-width: 460px;
overflow: hidden;
position: relative;
transition: transform 1s ease-in-out;
a {
color: $color-white;
View card.js
(function ($) {
'use strict';
Drupal.behaviors.card = {
attach: function (context, settings) {
var $bioButton = $('.card__view-bio', context);
var $bioDrawer = $('.card__bio', context);
var showBio = 'View full biography';
var hideBio = 'Hide biography';
View card.json
"image": "<img src='assets/miriam-werner.png' alt='Miriam B. Werner' />",
"name":"Miriam B. Werner",
"bio":"Miriam B. Weiner is an experienced travel writer and editor based in Washington, D.C. She has traveled all around Europe, as well as to countries in Africa and the Middle East. Now she’s set her sights on visiting the U.S. National Parks while providing the inspiration and information others need to make the most of America’s wilderness.",
"showBio": "View full biography",
"hideBio": "Hide biography",
"socialLinks": [
"icon": "instagram",
"url": ""
View card.twig
{# Attach card library #}
{{ attach_library('demo/card') }}
{# Import icons macro #}
{% import '@demo/icons/icons.twig' as icons %}
<div class="card">
<div class="card__image">{{ image }}</div>
<h2 class="card__name">{{ name }}</h2>
<div class="card__social-media">
<div class="card__social-media--label">Follow on:</div>
<ul class="menu card__menu--social">
View SassMeister-input-HTML.html
<div class="container">
<header role="header">Header</header>
<div class="content-wrapper">
<section class="main-content">
Main Content
<aside class="sidebar">
View Vertical-Layout-with-Navigation.markdown

Vertical Layout with Navigation

Vertical scrolling sections of content with mobile hamburger navigation. Animations easily customized.

A Pen by Ettrics on CodePen.


View Codepen-Example-Start.markdown