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

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

.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

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

  @include breakpoint($bp-sm) {

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

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

// 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

<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

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'menu__main' -->
<!-- FILE NAME SUGGESTIONS:
   * menu--main.html.twig
   x menu.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/navigation/menu.html.twig' -->

mariohernandez

{% import _self as menus %}

{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes }}>
    {% else %}