Skip to content

Instantly share code, notes, and snippets.

@wisbey
Last active December 20, 2015 16:39
Show Gist options
  • Save wisbey/6163538 to your computer and use it in GitHub Desktop.
Save wisbey/6163538 to your computer and use it in GitHub Desktop.
Media block two up full width
<div class="row">
<div class="l-content-full-width block __media two-up">
<h2>Media block (2 up)</h2>
<ul>
<li class="region">
<figure>
<a href="" title=""><img src="http://placehold.it/1000x500&text=img" alt="Image Alt"></a>
<div class="credits">This would be the credits, if applicable</div>
<figcaption>
This is a information for the image above, it can be either accreditation or a caption. This should not run more than 2 lines. (optional)
</figcaption>
</figure>
<h3><a href="" title="">Title</a></h3>
<p>Quisque fermentum eros sit amet odio suscipit, sit amet porta mi pharetra. In hac habitasse platea dictumst. Nulla facilisi. Morbi interdum fermentum faucibus.</p>
<p><a href="#" class="button-link"><span class="hide-descriptive-text">Follow this link to go to more information about</span>Optional button</a></p>
</li>
<li class="region">
<figure>
<a href="" title=""><img src="http://placehold.it/1000x500&text=img" alt="Image Alt"></a>
<div class="credits">This would be the credits, if applicable</div>
<figcaption>
This is a information for the image above, it can be either accreditation or a caption. This should not run more than 2 lines. (optional)
</figcaption>
</figure>
<h3><a href="" title="">Title</a></h3>
<p>Quisque fermentum eros sit amet odio suscipit, sit amet porta mi pharetra. In hac habitasse platea dictumst. Nulla facilisi. Morbi interdum fermentum faucibus.</p>
<p><a href="#" class="button-link"><span class="hide-descriptive-text">Follow this link to go to more information about</span>Optional button</a></p>
</li>
</ul>
</div> <!-- end image-block-2-up -->
</div> <!-- end row -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment