Skip to content

Instantly share code, notes, and snippets.

@ryanshoover

ryanshoover/tiles.html

Created June 21, 2019 02:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ryanshoover/5c4e336269316cb4b2ed26fedeca027d to your computer and use it in GitHub Desktop.
Save ryanshoover/5c4e336269316cb4b2ed26fedeca027d to your computer and use it in GitHub Desktop.
Download ZIP
Tile testing html
Raw
tiles.html
<div class="tiles tiles--two-per-row">
<div class="tile">
<div class="tile__photo">
<img src="https://picsum.photos/id/344/1440/900" class="tile__photo__image">
</div>
<h3 class="tile__title tile_title--small">Beef enim hamburger, doner</h3>
<p class="tile__description">
salami cupidatat ipsum deserunt. Corned beef prosciutto esse eiusmod short loin sausage ut jowl ipsum
cupidatat. Flank meatball pariatur fugiat meatloaf beef. Pork chop turkey jerky, in nostrud in non
consectetur turducken shoulder pig esse cow eu.
</p>
</div>
<div class="tile">
<h3 class="tile__title tile_title--small">Beef enim hamburger, doner</h3>
<p class="tile__description">
salami cupidatat ipsum deserunt. Corned beef prosciutto esse eiusmod short loin sausage ut jowl ipsum
cupidatat. Flank meatball pariatur fugiat meatloaf beef. Pork chop turkey jerky, in nostrud in non
consectetur turducken shoulder pig esse cow eu.
</p>
<p class="tile__button">
<a href="/" class="button button--sunset-mirage">Go home</a>
</p>
</div>
<div class="tile">
<h3 class="tile__title tile_title--small">Beef enim hamburger, doner</h3>
<p class="tile__button">
<a href="/" class="button button--sunset-mirage">Go home</a>
</p>
</div>
<div class="tile">
<div class="tile__photo">
<img src="https://picsum.photos/id/344/1440/900" class="tile__photo__image">
</div>
<h3 class="tile__title tile_title--small">Beef enim hamburger, doner</h3>
</div>
<div class="tile tile--link">
<a class="tile__link" href="/">
<div class="tile__photo tile__photo--fixed-height">
<img src="https://picsum.photos/id/344/1440/900" class="tile__photo__image">
<span class="tile__photo__badge">
<svg xmlns="http://www.w3.org/2000/svg" id="wpengine-flag" data-name="WP Engine Icon"
viewBox="0 0 40 40">
<defs>
<clipPath id="wpengine-icon-clip-path">
<path fill="none" d="M0 0h40v40H0z"></path>
</clipPath>
</defs>
<g clip-path="url(#wpengine-icon-clip-path)">
<g id="WPE">
<path fill="#fff" d="M0 0h40v40H0z"></path>
<g id="WPE-2">
<path id="Rectangle_50" fill="#0ecad4" d="M0 0h40v40H0z" data-name="Rectangle 50">
</path>
<g id="Group_480" fill="#fff" data-name="Group 480">
<path id="Path_84" d="M16.14 32h7.72v-5.84L22 24.28h-4l-1.84 1.88z"
data-name="Path 84"></path>
<path id="Path_85" d="M26.16 16.14L24.28 18v4l1.88 1.84H32v-7.7z"
data-name="Path 85"></path>
<path id="Path_86" d="M23.86 8h-7.72v5.88L18 15.72h4l1.84-1.84z"
data-name="Path 86"></path>
<path id="Path_87" d="M32 32v-5.84l-1.84-1.88h-5.88V32z" data-name="Path 87">
</path>
<path id="Path_88" d="M9.84 8L8 9.84v5.88h7.72V8z" data-name="Path 88"></path>
<path id="Path_89" d="M24.28 8v5.88l1.88 1.84H32V8z" data-name="Path 89"></path>
<path id="Path_90"
d="M20 21.13a1.08 1.08 0 1 1 1.08-1.08 1.06 1.06 0 0 1-1 1.08z"
data-name="Path 90"></path>
<path id="Path_91" d="M15.72 16.14H8v7.72h5.88L15.72 22z" data-name="Path 91">
</path>
<path id="Path_92" d="M15.72 26.16l-1.84-1.88H8V32h5.88l1.84-1.84z"
data-name="Path 92"></path>
</g>
</g>
</g>
</g>
</svg>
</span>
</div>
<header class="tile__header">
<span class="tile__pretitle">WP Engine</span>
<h2 class="tile__title">Beef enim hamburger, doner</h2>
<time class="tile__date" datetime="2019-06-19T10:31:11">
<span class="tile__date-date">June 19, 2019</span>
</time>
</header><!-- .tile__header -->
<span class="tile__line"></span>
</a>
</div>
<div class="tile tile--link">
<a class="tile__link" href="/">
<div class="tile__photo tile__photo--fixed-height">
<img src="https://picsum.photos/id/344/1440/900" class="tile__photo__image">
<span class="tile__photo__badge">
<svg xmlns="http://www.w3.org/2000/svg" id="wpengine-flag" data-name="WP Engine Icon"
viewBox="0 0 40 40">
<defs>
<clipPath id="wpengine-icon-clip-path">
<path fill="none" d="M0 0h40v40H0z"></path>
</clipPath>
</defs>
<g clip-path="url(#wpengine-icon-clip-path)">
<g id="WPE">
<path fill="#fff" d="M0 0h40v40H0z"></path>
<g id="WPE-2">
<path id="Rectangle_50" fill="#0ecad4" d="M0 0h40v40H0z" data-name="Rectangle 50">
</path>
<g id="Group_480" fill="#fff" data-name="Group 480">
<path id="Path_84" d="M16.14 32h7.72v-5.84L22 24.28h-4l-1.84 1.88z"
data-name="Path 84"></path>
<path id="Path_85" d="M26.16 16.14L24.28 18v4l1.88 1.84H32v-7.7z"
data-name="Path 85"></path>
<path id="Path_86" d="M23.86 8h-7.72v5.88L18 15.72h4l1.84-1.84z"
data-name="Path 86"></path>
<path id="Path_87" d="M32 32v-5.84l-1.84-1.88h-5.88V32z" data-name="Path 87">
</path>
<path id="Path_88" d="M9.84 8L8 9.84v5.88h7.72V8z" data-name="Path 88"></path>
<path id="Path_89" d="M24.28 8v5.88l1.88 1.84H32V8z" data-name="Path 89"></path>
<path id="Path_90"
d="M20 21.13a1.08 1.08 0 1 1 1.08-1.08 1.06 1.06 0 0 1-1 1.08z"
data-name="Path 90"></path>
<path id="Path_91" d="M15.72 16.14H8v7.72h5.88L15.72 22z" data-name="Path 91">
</path>
<path id="Path_92" d="M15.72 26.16l-1.84-1.88H8V32h5.88l1.84-1.84z"
data-name="Path 92"></path>
</g>
</g>
</g>
</g>
</svg>
</span>
</div>
<header class="tile__header">
<h2 class="tile__title">Beef enim hamburger, doner</h2>
</header><!-- .tile__header -->
<p class="tile__description">
salami cupidatat ipsum deserunt. Corned beef prosciutto esse eiusmod short loin sausage ut jowl ipsum
cupidatat. Flank meatball pariatur fugiat meatloaf beef. Pork chop turkey jerky, in nostrud in non
consectetur turducken shoulder pig esse cow eu.
</p>
<span class="tile__line"></span>
</a>
</div>
<div class="tile tile--link tile--photo">
<a href="/"
class="tile__link">
<div class="tile__photo">
<img src="https://picsum.photos/id/344/1440/900" class="tile__photo__image">
</div>
<div class="block class-block block--center-align">
<div class="tile__pretitle">Chairwoman and CEO</div>
<h3 class="block-title heading--size-5">Heather Brunner</h3>
</div>
<span class="tile__line"></span>
</a>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment