Skip to content

Instantly share code, notes, and snippets.

@mrjasonweaver

mrjasonweaver/_matrix.html

Created January 15, 2016 16:31
Show Gist options
  • Save mrjasonweaver/6909c5c9b5c0c97d39b0 to your computer and use it in GitHub Desktop.
Save mrjasonweaver/6909c5c9b5c0c97d39b0 to your computer and use it in GitHub Desktop.
Download ZIP
Module matrix for Craft CMS
Raw
_matrix.html
{% for block in entry.modulesMatrix %}
{% switch block.type %}
{% case "hero" %}
<div class="section first-section {% if block.backgroundColor.contains('Dark Background') %}alt {% endif%}" style="{% set bgImage = block.heroBackgroundImage.first() %}{% if bgImage %}background-image: url({{ siteUrl }}{{ bgImage.url() }}); background-size: cover;{% endif%}{% if block.backgroundColor.contains('Alt Background Color') %} {{ block.altBackgroundColor }}{% endif%}">
{% if block.heroOverlay | length %}
<div class="hero-overlay" style="background-color: {{ block.heroOverlayColor }};"></div>
{% endif %}
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
{% if block.heading %}
<h1 class="alpha center {% set imgReplace = block.headingImageReplacement.first() %}{% if imgReplace %}ir {% endif %}" style="{% if imgReplace %}background-image: url({{ siteUrl }}{{ imgReplace.url() }});{% endif %} {% if block.textColor.contains('Check this box if you want to change text color') %} color: {{ block.altTextColor }};{% endif%}">{{ block.heading }}</h1>
{% endif %}
{% if block.subHeading %}
<div class="subtext center "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.subHeading }}</div>
{% endif %}
{% if block.textCopy %}
<div class="center large "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.textCopy }}</div>
{% endif %}
</div>
</div>
</div>
{% case "oneUp" %}
<div class="section {% if block.backgroundColor.contains('Dark Background') %}alt {% endif%}" style="{% if block.backgroundColor.contains('Alt Background Color') %}background-color: {{ block.altBackgroundColor }};{% endif%}">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
{% if block.heading %}
<h2 class="alpha center "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.heading }}</h2>
{% endif %}
{% if block.textCopy %}
<div class="center large "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.textCopy }}</div>
{% endif %}
{% set image = block.image.first() %}{% if image %}
<figure class="img-wrap">
<img src="{{ image.url }}" alt="{{ image.title }}" class="">
</figure>
{% endif %}
</div>
</div>
</div>
{% case "twoUp" %}
<div class="section {% if block.backgroundColor.contains('Dark Background') %}alt {% endif%}" style="{% if block.backgroundColor.contains('Alt Background Color') %}background-color: {{ block.altBackgroundColor }};{% endif%}">
<div class="flex">
<div class="g1-flex4 g2-flex3 g3-flex6">
{% set imageOne = block.images.first() %}{% if imageOne %}
<figure class="img-wrap">
<img src="{{ imageOne.url }}" alt="{{ imageOne.title }}" class="">
</figure>
{% endif %}
{% if block.headingOne %}
<h2 class="beta "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.headingOne }}</h2>
{% endif %}
{% if block.textCopyOne %}
<div class=""{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.textCopyOne }}
</div>
{% endif %}
</div>
<div class="g1-flex4 g2-flex3 g3-flex6">
{% set imageTwo = block.images[1] %}{% if imageTwo %}
<figure class="img-wrap">
<img src="{{ imageTwo.url }}" alt="{{ imageTwo.title }}" class="">
</figure>
{% endif %}
{% if block.headingTwo %}
<h2 class="beta "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.headingTwo }}</h2>
{% endif %}
{% if block.textCopyTwo %}
<div class=""{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.textCopyTwo }}
</div>
{% endif %}
</div>
</div>
</div>
{% case "threeUp" %}
<div class="section {% if block.backgroundColor.contains('Dark Background') %}alt {% endif%}" style="{% if block.backgroundColor.contains('Alt Background Color') %}background-color: {{ block.altBackgroundColor }};{% endif%}">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
{% if block.sectionHeading %}
<h2 class="alpha center "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.sectionHeading }}</h2>
{% endif %}
{% if block.sectionSubheading %}
<div class="center subtext"{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.sectionSubheading }}</div>
{% endif %}
</div>
</div>
<div class="flex">
<div class="g1-flex4 g2-flex2 g3-flex4">
{% set imageOne = block.images.first() %}{% if imageOne %}
<figure class="img-wrap">
<img src="{{ imageOne.url }}" alt="{{ imageOne.title }}" class="contain-illo alt2">
</figure>
{% endif %}
{% if block.headingOne %}
<h2 class="gamma "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.headingOne }}</h2>
{% endif %}
{% if block.textCopyOne %}
<div class=""{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.textCopyOne }}
</div>
{% endif %}
</div>
<div class="g1-flex4 g2-flex2 g3-flex4">
{% set imageTwo = block.images[1] %}{% if imageTwo %}
<figure class="img-wrap">
<img src="{{ imageTwo.url }}" alt="{{ imageTwo.title }}" class="contain-illo alt2">
</figure>
{% endif %}
{% if block.headingTwo %}
<h2 class="gamma "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.headingTwo }}</h2>
{% endif %}
{% if block.textCopyTwo %}
<div class=""{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.textCopyTwo }}
</div>
{% endif %}
</div>
<div class="g1-flex4 g2-flex2 g3-flex4">
{% set imageThree = block.images[2] %}{% if imageThree %}
<figure class="img-wrap">
<img src="{{ imageThree.url }}" alt="{{ imageThree.title }}" class="contain-illo alt2">
</figure>
{% endif %}
{% if block.headingThree %}
<h2 class="gamma "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.headingThree }}</h2>
{% endif %}
{% if block.textCopyThree %}
<div class=""{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.textCopyThree }}
</div>
{% endif %}
</div>
</div>
</div>
{% case "fourUp" %}
<div class="section {% if block.backgroundColor.contains('Dark Background') %}alt {% endif%}" style="{% if block.backgroundColor.contains('Alt Background Color') %}background-color: {{ block.altBackgroundColor }};{% endif%}">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
{% if block.sectionHeading %}
<h2 class="alpha center "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.sectionHeading }}</h2>
{% endif %}
{% if block.sectionSubheading %}
<div class="center subtext"{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.sectionSubheading }}</div>
{% endif %}
</div>
</div>
<div class="flex">
<div class="g1-flex4 g2-flex3 g3-flex6">
<div class="inner-wrap">
{% if block.layout.contains('Grid Image left') %}
<div class="flexbox">
<div class="flexbox-image-wrap g1-flex4 g2-flex6 g3-flex5">
{% endif %}
{% set imageOne = block.images.first() %}{% if imageOne %}
<figure class="img-wrap">
<img src="{{ imageOne.url }}" alt="{{ imageOne.title }}" class="contain-illo alt2">
</figure>
{% endif %}
{% if block.layout.contains('Grid Image left') %}
</div>
<div class="flexbox-text-wrap g1-flex4 g2-flex6 g3-flex7">
{% endif %}
{% if block.headingOne %}
<h3 class="alpha "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.headingOne }}</h3>
{% endif %}
{% if block.textCopyOne %}
<div class=""{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.textCopyOne }}
</div>
{% endif %}
{% if block.layout.contains('Grid Image left') %}
</div>
{% endif %}
{% if block.layout.contains('Grid Image left') %}
</div>
{% endif %}
</div>
</div>
<div class="g1-flex4 g2-flex3 g3-flex6">
<div class="inner-wrap">
{% if block.layout.contains('Grid Image left') %}
<div class="flexbox">
<div class="flexbox-image-wrap g1-flex4 g2-flex6 g3-flex5">
{% endif %}
{% set imageTwo = block.images[1] %}{% if imageTwo %}
<figure class="img-wrap">
<img src="{{ imageTwo.url }}" alt="{{ imageTwo.title }}" class="contain-illo alt2">
</figure>
{% endif %}
{% if block.layout.contains('Grid Image left') %}
</div>
<div class="flexbox-text-wrap g1-flex4 g2-flex6 g3-flex7">
{% endif %}
{% if block.headingTwo %}
<h3 class="alpha "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.headingTwo }}</h3>
{% endif %}
{% if block.textCopyTwo %}
<div class=""{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.textCopyTwo }}
</div>
{% endif %}
{% if block.layout.contains('Grid Image left') %}
</div>
</div>
{% endif %}
</div>
</div>
<div class="g1-flex4 g2-flex3 g3-flex6">
<div class="inner-wrap">
{% if block.layout.contains('Grid Image left') %}
<div class="flexbox">
<div class="flexbox-image-wrap g1-flex4 g2-flex6 g3-flex5">
{% endif %}
{% set imageThree = block.images[2] %}{% if imageThree %}
<figure class="img-wrap">
<img src="{{ imageThree.url }}" alt="{{ imageThree.title }}" class="contain-illo alt2">
</figure>
{% endif %}
{% if block.layout.contains('Grid Image left') %}
</div>
<div class="flexbox-text-wrap g1-flex4 g2-flex6 g3-flex7">
{% endif %}
{% if block.headingThree %}
<h3 class="alpha "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.headingThree }}</h3>
{% endif %}
{% if block.textCopyThree %}
<div class=""{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.textCopyThree }}
</div>
{% endif %}
{% if block.layout.contains('Grid Image left') %}
</div>
</div>
{% endif %}
</div>
</div>
<div class="g1-flex4 g2-flex3 g3-flex6">
<div class="inner-wrap">
{% if block.layout.contains('Grid Image left') %}
<div class="flexbox">
<div class="flexbox-image-wrap g1-flex4 g2-flex6 g3-flex5">
{% endif %}
{% set imageFour = block.images[3] %}{% if imageFour %}
<figure class="img-wrap">
<img src="{{ imageFour.url }}" alt="{{ imageFour.title }}" class="contain-illo alt2">
</figure>
{% endif %}
{% if block.layout.contains('Grid Image left') %}
</div>
<div class="flexbox-text-wrap g1-flex4 g2-flex6 g3-flex7">
{% endif %}
{% if block.headingFour %}
<h3 class="alpha "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.headingFour }}</h3>
{% endif %}
{% if block.textCopyFour %}
<div class=""{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.textCopyFour }}
</div>
{% endif %}
{% if block.layout.contains('Grid Image left') %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% case "fiveUp" %}
<div class="section {% if block.backgroundColor.contains('Dark Background') %}alt {% endif%}" style="{% set bgImage = block.backgroundImage.first() %}{% if bgImage %}background-image: url({{ siteUrl }}{{ bgImage.url() }}); background-repeat: no-repeat; background-position: right top;{% endif%}{% if block.backgroundColor.contains('Alt Background Color') %} {{ block.altBackgroundColor }}{% endif%}">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex5">
{% if block.sectionHeading %}
<h2 class="alpha "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.sectionHeading }}</h2>
{% endif %}
{% if block.sectionSubheading %}
<div class="subtext"{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.sectionSubheading }}</div>
{% endif %}
{% if block.sectionTextCopy %}
<p class="large"{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.sectionTextCopy }}</p>
{% endif %}
<hr class="horz-rule alt2 ghost">
</div>
</div>
<div class="flex">
<div class="g1-flex4 g2-flex2 g3-flex4">
{% set imageOne = block.images.first() %}{% if imageOne %}
<figure class="img-wrap">
<img src="{{ imageOne.url }}" alt="{{ imageOne.title }}" class="contain-illo alt3">
</figure>
{% endif %}
{% if block.headingOne %}
<h2 class="beta alt center "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.headingOne }}</h2>
{% endif %}
{% if block.textCopyOne %}
<div class="center"{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.textCopyOne }}
</div>
{% endif %}
</div>
<div class="g1-flex4 g2-flex2 g3-flex4">
{% set imageTwo = block.images[1] %}{% if imageTwo %}
<figure class="img-wrap">
<img src="{{ imageTwo.url }}" alt="{{ imageTwo.title }}" class="contain-illo alt3">
</figure>
{% endif %}
{% if block.headingTwo %}
<h2 class="beta center alt "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.headingTwo }}</h2>
{% endif %}
{% if block.textCopyTwo %}
<div class="center"{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.textCopyTwo }}
</div>
{% endif %}
</div>
</div>
<div class="flex">
<div class="g1-flex4 g2-flex2 g3-flex4">
{% set imageThree = block.images[2] %}{% if imageThree %}
<figure class="img-wrap">
<img src="{{ imageThree.url }}" alt="{{ imageThree.title }}" class="contain-illo alt3">
</figure>
{% endif %}
{% if block.headingThree %}
<h2 class="beta center alt "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.headingThree }}</h2>
{% endif %}
{% if block.textCopyThree %}
<div class="center"{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.textCopyThree }}
</div>
{% endif %}
</div>
<div class="g1-flex4 g2-flex2 g3-flex4">
{% set imageFour = block.images[3] %}{% if imageFour %}
<figure class="img-wrap">
<img src="{{ imageFour.url }}" alt="{{ imageFour.title }}" class="contain-illo alt3">
</figure>
{% endif %}
{% if block.headingFour %}
<h2 class="beta center alt "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.headingFour }}</h2>
{% endif %}
{% if block.textCopyFour %}
<div class="center"{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.textCopyFour }}
</div>
{% endif %}
</div>
<div class="g1-flex4 g2-flex2 g3-flex4">
{% set imageFive = block.images[4] %}{% if imageFive %}
<figure class="img-wrap">
<img src="{{ imageFive.url }}" alt="{{ imageFive.title }}" class="contain-illo alt3">
</figure>
{% endif %}
{% if block.headingFive %}
<h2 class="beta center alt "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.headingFive }}</h2>
{% endif %}
{% if block.textCopyFive %}
<div class="center"{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.textCopyFive }}
</div>
{% endif %}
</div>
</div>
</div>
{% case "vimeoVideo" %}
{% if block.fullWidth | length %}
{% if block.videoId %}
<div class="video-wrapper">
<iframe src="https://player.vimeo.com/video/{{ block.videoId }}?color=52bad5&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
{% endif %}
{% else %}
<div class="section {% if block.backgroundColor.contains('Dark Background') %}alt {% endif%}" style="{% if block.backgroundColor.contains('Alt Background Color') %}background-color: {{ block.altBackgroundColor }};{% endif%}">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
{% if block.sectionHeading %}
<h2 class="alpha center "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.sectionHeading }}</h2>
{% endif %}
{% if block.sectionSubheading %}
<div class="center subtext "{% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.sectionSubheading }}</div>
{% endif %}
</div>
</div>
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
{% if block.videoId %}
<div class="video-wrapper">
<iframe src="https://player.vimeo.com/video/{{ block.videoId }}?color=52bad5&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
{% case "blockquote" %}
<div class="section {% if block.quoteOverlay | length %}with-overlay{% endif %} {% if block.backgroundColor.contains('Dark Background') %}alt {% endif%}" style="{% set bgImage = block.backgroundImage.first() %}{% if bgImage %}background-image: url({{ siteUrl }}{{ bgImage.url() }}); background-size: cover;{% endif%}{% if block.backgroundColor.contains('Alt Background Color') %} {{ block.altBackgroundColor }}{% endif%}">
{% if block.quoteOverlay | length %}
<div class="hero-overlay" style="background-color: {{ block.quoteOverlayColor }};"></div>
{% endif %}
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
{% if block.quote %}
<blockquote class="alt" {% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>
{{ block.quote }}
</blockquote>
{% if block.attribution %}
<cite class="alt" {% if block.textColor.contains('Check this box if you want to change text color') %} style="color: {{ block.altTextColor }}"{% endif%}>{{ block.attribution }}</cite>
{% endif %}
{% endif %}
</div>
</div>
</div>
{% case "startImageRow" %}
<div class="section" style="padding-top: {% if block.sectionTopPadding %}{{ block.sectionTopPadding }};{% endif %}">
{% if block.sectionHeading %}
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<h2 class="beta center">{{ block.sectionHeading }}</h2>
</div>
</div>
{% endif %}
<div class="flex">
<div class="flexbox" style="justify-content: center; align-items: baseline; width: 100%;">
{% if block.imageLink %}
<a href="{{ block.imageLink }}" style="padding: 0 10px; max-width: {% if block.maxWidth %}{{ block.maxWidth }};{% endif %}">
{% else %}
<div class="flexbox-image-wrap" style="padding: 0 10px; max-width: {% if block.maxWidth %}{{ block.maxWidth }};{% endif %}">
{% endif %}
{% set firstImage = block.image.first %}{% if firstImage %}
<figure class="img-wrap">
<img class="contain-illo" src="{{ firstImage.url }}" alt="{{ firstImage.title }}">
</figure>
{% endif %}
{% if block.heading %}
<h2 class="delta center">{{ block.heading }}</h2>
{% endif %}
{% if block.description %}
<p class="center">{{ block.description }}</p>
{% endif %}
{% if block.imageLink %}
</a>
{% else %}
</div>
{% endif %}
{% case "addImage" %}
{% if block.imageLink %}
<a href="{{ block.imageLink }}" style="padding: 0 10px; max-width: {% if block.maxWidth %}{{ block.maxWidth }};{% endif %}">
{% else %}
<div class="flexbox-image-wrap" style="padding: 0 10px; max-width: {% if block.maxWidth %}{{ block.maxWidth }};{% endif %}">
{% endif %}
{% set firstImage = block.image.first %}{% if firstImage %}
<figure class="img-wrap">
<img class="contain-illo" src="{{ firstImage.url }}" alt="{{ firstImage.title }}">
</figure>
{% endif %}
{% if block.heading %}
<h2 class="delta center">{{ block.heading }}</h2>
{% endif %}
{% if block.description %}
<p class="center">{{ block.description }}</p>
{% endif %}
{% if block.imageLink %}
</a>
{% else %}
</div>
{% endif %}
{% case "endImageRow" %}
</div>
</div>
<div style="padding-bottom: {% if block.paddingBottom %}{{ block.paddingBottom }};{% endif %}"></div>
</div>
{% case "mediaGallery" %}
<div class="media-section">
{% set images = block.images %}{% if images %}
{% for image in images %}
<div class="half-section">
<img src="{{ image.url }}" alt="{{ image.title }}">
</div>
{% endfor %}
{% endif %}
</div>
{% endswitch %}
{% endfor %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment