mariohernandez

<nav class="main-menu"> 
  <ul class="main-menu__items">
    {% for item in items %}
      <li class="main-menu__item{{ item.below ? ' has-submenu' }}">
        <a class="main-menu__item--link" href="{{ item.url }}">
          {{ item.title }}
        </a>
        {% if item.below %}
          <ul class="main-menu__sub-menu" id="main-menu">
            {% for sublink in item.below.items %}

mariohernandez

// Import site utilities.
@import '../../global/utils/init';

.movie-card {
  background: $color-black;
  color: $color-white;
  height: 250px;
  max-width: 420px;
  overflow: hidden;
  position: relative;

mariohernandez

cover_image: <img src='/sites/default/files/action-3.jpg' alt='' />
heading:
  title: "I love this movie"
  url: "#"
  heading_level: 4
  modifier:
    movie-card__header
average_rating: "3"
mpaa_rating: "PG-13"
synopsis: "Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna."

mariohernandez

<article class="movie-card {{ modifier_class }}"
  {{ attributes ? attributes.class }}"
  {{ attributes ? attributes|without(class) }}>
  {{ title_prefix }}
  {{ title_suffix }}
  {% if cover_image %}
    <div class="movie-card__cover-image">
      {{ cover_image }}
    </div>
  {% endif %}

mariohernandez

.featured-movie {
  align-items: center;
  background: $color-black;
  display: flex;
  height: 480px;
  overflow: hidden;
  position: relative;
  width: 100%;

  @include breakpoint($bp-sm) {

mariohernandez

.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);

mariohernandez

{# 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,

mariohernandez

.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;

mariohernandez

(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';

mariohernandez

{
  "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": "http://instagram.com"