<main id="uix-maincontent">
<!-- Content
====================================================== -->
<section class="uix-spacing--s uix-spacing--no-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Thumbnail Card</h3>
<p>The following is a Thumbnail style card using flex.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-lg-4 col-md-4">
<div class="uix-card--thumb">
<div class="uix-card--thumb__header">
<div class="uix-card--thumb__preview" style="flex-basis: 50px;">
<!-- image begin -->
<img src="https://via.placeholder.com/150x150" alt="" class="uix-border--circle">
<!-- image end -->
</div>
<div class="uix-card--thumb__content">
<div class="uix-card--thumb__content__child">
<div class="uix-card--thumb__content__child--left">
<div>
<!-- content begin -->
<strong>Long title Long title Long title Long title Long title Long title Long title Long title </strong>
<!-- content end -->
</div>
</div>
<div class="uix-card--thumb__content__child--right" style="min-width: 50px; text-align: right;">
<!-- content begin -->
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
<!-- content end -->
</div>
</div>
</div>
</div>
<div class="uix-card--thumb__body">
<!-- content begin -->
<small class="uix-typo--color-sub">
Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.
</small>
<!-- content end -->
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="uix-card--thumb">
<div class="uix-card--thumb__header">
<div class="uix-card--thumb__preview" style="flex-basis: 50px;">
<!-- image begin -->
<img src="https://via.placeholder.com/150x150" alt="" class="uix-border--circle">
<!-- image end -->
</div>
<div class="uix-card--thumb__content">
<div class="uix-card--thumb__content__child">
<div class="uix-card--thumb__content__child--left">
<div>
<!-- content begin -->
<h5 class="uix-t-ellipsis uix-spacing--no">Title</h5>
<small class="uix-typo--color-sub">@https://uiux.cc</small>
<!-- content end -->
</div>
</div>
<div class="uix-card--thumb__content__child--right" style="min-width: 50px; text-align: right;">
<!-- content begin -->
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
<!-- content end -->
</div>
</div>
</div>
</div>
<div class="uix-card--thumb__body">
<!-- content begin -->
<small class="uix-typo--color-sub">
Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.
</small>
<!-- content end -->
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="uix-card--thumb">
<div class="uix-card--thumb__header">
<div class="uix-card--thumb__preview" style="flex-basis: 50px;">
<!-- image begin -->
<img src="https://via.placeholder.com/150x150" alt="" class="uix-border--circle">
<!-- image end -->
</div>
<div class="uix-card--thumb__content">
<div class="uix-card--thumb__content__child">
<div class="uix-card--thumb__content__child--left">
<div>
<!-- content begin -->
<h5 class="uix-t-ellipsis uix-spacing--no">Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title </h5>
<small class="uix-typo--color-sub">@https://uiux.cc</small>
<!-- content end -->
</div>
</div>
<div class="uix-card--thumb__content__child--right" style="min-width: 50px; text-align: right;">
<!-- content begin -->
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
<!-- content end -->
</div>
</div>
</div>
</div>
<div class="uix-card--thumb__body">
<!-- content begin -->
<small class="uix-typo--color-sub">
Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.
</small>
<!-- content end -->
</div>
</div>
</div>
</div>
<!-- .row end -->
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s uix-spacing--no-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Gallery Card</h3>
<p>The following is a gallery style card using flex.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-lg-5 col-md-5">
<div class="uix-card--gallery" role="figure">
<div class="uix-card--gallery__preview">
<!-- image begin -->
<img src="https://via.placeholder.com/1920x1080" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<h5 class="uix-relative--inline" style="margin: 10px; padding-bottom: 0;">Name </h5>
<small class="uix-typo--color-sub">0/15/18</small>
<div class="uix-card--gallery__action" style="margin: 10px;">
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
</div>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="uix-card--gallery" role="figure">
<div class="uix-card--gallery__preview">
<!-- image begin -->
<img src="https://via.placeholder.com/1920x1080" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<h5 class="uix-relative--inline" style="margin: 10px; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
<div class="uix-card--gallery__action" style="margin: 10px;">
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
</div>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="uix-card--gallery" role="figure">
<div class="uix-card--gallery__preview">
<!-- image begin -->
<img src="https://via.placeholder.com/1920x1080" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<h5 class="uix-t-ellipsis" style="margin: 10px; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
<div class="uix-card--gallery__action" style="margin: 10px;">
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
</div>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="uix-card--gallery uix-card--gallery--horizontal is-mobile-still" role="figure">
<div class="uix-card--gallery__preview" style="padding: 25px; background: #EAEAEA;">
<!-- image begin -->
<svg width="30" height="30" viewBox="0 0 512 512">
<g>
<rect width="109.2" x="82.3" y="96.9" height="20.8" />
<rect width="109.2" x="82.3" y="158.2" height="20.8" />
<rect width="256.9" x="82.3" y="218.6" height="20.8" />
<rect width="256.9" x="82.3" y="278.9" height="20.8" />
<path d="m487.9,249.7c-16.3-16.3-42.7-16.3-59,0l-22.1,22.1v-112.5c0-3.1-1-5.2-3.1-7.3l-137.3-137.3c-2.1-2.1-4.2-3.1-7.3-3.1h-237.2c-6.2,0-10.4,4.2-10.4,10.4v468.1c0,6.2 4.2,10.4 10.4,10.4h374.5c6.2,0 10.4-4.2 10.4-11.4v-99.3l81.1-81.1c16.3-16.3 16.3-42.7 0-59zm-218.4-202.8l101.9,101.9h-101.9v-101.9zm116.5,432.8h-353.7v-447.3h216.4v126.9c0,6.2 4.2,10.4 10.4,10.4h126.9v122.9l-99.2,99.2-8.8,67.8 67.8-8.8 40.3-40.3v69.2zm87.2-186.1l-136.8,136.8-35,5.7 5.7-35 136.8-136.8c8.1-8.1 21.2-8.1 29.3,0 8.1,8.1 8.1,21.2 0,29.3z" />
</g>
</svg>
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 0 10px 10px; display: block;">
<h5 class="uix-t-ellipsis" style="margin: 10px; margin-left: 0; margin-bottom: 0; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="uix-card--gallery uix-card--gallery--horizontal is-mobile-still" role="figure">
<div class="uix-card--gallery__preview" style="padding: 25px; background: #EAEAEA;">
<!-- image begin -->
<svg width="30" height="30" viewBox="0 0 512 512">
<g>
<rect width="109.2" x="82.3" y="96.9" height="20.8" />
<rect width="109.2" x="82.3" y="158.2" height="20.8" />
<rect width="256.9" x="82.3" y="218.6" height="20.8" />
<rect width="256.9" x="82.3" y="278.9" height="20.8" />
<path d="m487.9,249.7c-16.3-16.3-42.7-16.3-59,0l-22.1,22.1v-112.5c0-3.1-1-5.2-3.1-7.3l-137.3-137.3c-2.1-2.1-4.2-3.1-7.3-3.1h-237.2c-6.2,0-10.4,4.2-10.4,10.4v468.1c0,6.2 4.2,10.4 10.4,10.4h374.5c6.2,0 10.4-4.2 10.4-11.4v-99.3l81.1-81.1c16.3-16.3 16.3-42.7 0-59zm-218.4-202.8l101.9,101.9h-101.9v-101.9zm116.5,432.8h-353.7v-447.3h216.4v126.9c0,6.2 4.2,10.4 10.4,10.4h126.9v122.9l-99.2,99.2-8.8,67.8 67.8-8.8 40.3-40.3v69.2zm87.2-186.1l-136.8,136.8-35,5.7 5.7-35 136.8-136.8c8.1-8.1 21.2-8.1 29.3,0 8.1,8.1 8.1,21.2 0,29.3z" />
</g>
</svg>
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 0 10px 10px; display: block;">
<h5 style="margin: 10px 0; margin-bottom: 0; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="uix-card--gallery uix-card--gallery--horizontal is-mobile-still" role="figure">
<div class="uix-card--gallery__preview" style="padding: 25px; background: #EAEAEA;">
<!-- image begin -->
<svg width="30" height="30" viewBox="0 0 512 512">
<g>
<rect width="109.2" x="82.3" y="96.9" height="20.8" />
<rect width="109.2" x="82.3" y="158.2" height="20.8" />
<rect width="256.9" x="82.3" y="218.6" height="20.8" />
<rect width="256.9" x="82.3" y="278.9" height="20.8" />
<path d="m487.9,249.7c-16.3-16.3-42.7-16.3-59,0l-22.1,22.1v-112.5c0-3.1-1-5.2-3.1-7.3l-137.3-137.3c-2.1-2.1-4.2-3.1-7.3-3.1h-237.2c-6.2,0-10.4,4.2-10.4,10.4v468.1c0,6.2 4.2,10.4 10.4,10.4h374.5c6.2,0 10.4-4.2 10.4-11.4v-99.3l81.1-81.1c16.3-16.3 16.3-42.7 0-59zm-218.4-202.8l101.9,101.9h-101.9v-101.9zm116.5,432.8h-353.7v-447.3h216.4v126.9c0,6.2 4.2,10.4 10.4,10.4h126.9v122.9l-99.2,99.2-8.8,67.8 67.8-8.8 40.3-40.3v69.2zm87.2-186.1l-136.8,136.8-35,5.7 5.7-35 136.8-136.8c8.1-8.1 21.2-8.1 29.3,0 8.1,8.1 8.1,21.2 0,29.3z" />
</g>
</svg>
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 0 10px 10px; display: block;">
<h5 class="uix-t-ellipsis" style="margin: 10px; margin-left: 0; margin-bottom: 0; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
<div class="uix-card--gallery__action" style="margin: 10px;">
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
</div>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="uix-card--gallery uix-card--gallery--horizontal is-mobile-still" role="figure">
<div class="uix-card--gallery__preview" style="padding: 25px; background: #EAEAEA;">
<!-- image begin -->
<svg width="30" height="30" viewBox="0 0 512 512">
<g>
<rect width="109.2" x="82.3" y="96.9" height="20.8" />
<rect width="109.2" x="82.3" y="158.2" height="20.8" />
<rect width="256.9" x="82.3" y="218.6" height="20.8" />
<rect width="256.9" x="82.3" y="278.9" height="20.8" />
<path d="m487.9,249.7c-16.3-16.3-42.7-16.3-59,0l-22.1,22.1v-112.5c0-3.1-1-5.2-3.1-7.3l-137.3-137.3c-2.1-2.1-4.2-3.1-7.3-3.1h-237.2c-6.2,0-10.4,4.2-10.4,10.4v468.1c0,6.2 4.2,10.4 10.4,10.4h374.5c6.2,0 10.4-4.2 10.4-11.4v-99.3l81.1-81.1c16.3-16.3 16.3-42.7 0-59zm-218.4-202.8l101.9,101.9h-101.9v-101.9zm116.5,432.8h-353.7v-447.3h216.4v126.9c0,6.2 4.2,10.4 10.4,10.4h126.9v122.9l-99.2,99.2-8.8,67.8 67.8-8.8 40.3-40.3v69.2zm87.2-186.1l-136.8,136.8-35,5.7 5.7-35 136.8-136.8c8.1-8.1 21.2-8.1 29.3,0 8.1,8.1 8.1,21.2 0,29.3z" />
</g>
</svg>
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 0 10px 10px; display: block;">
<h5 style="margin: 10px 0; margin-bottom: 0; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
<div class="uix-card--gallery__action" style="margin: 10px;">
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
</div>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="uix-card--gallery uix-card--gallery--horizontal is-mobile-still" role="figure">
<div class="uix-card--gallery__preview" style="padding: 25px; background: #EAEAEA;">
<!-- image begin -->
<svg width="30" height="30" viewBox="0 0 512 512">
<g>
<rect width="109.2" x="82.3" y="96.9" height="20.8" />
<rect width="109.2" x="82.3" y="158.2" height="20.8" />
<rect width="256.9" x="82.3" y="218.6" height="20.8" />
<rect width="256.9" x="82.3" y="278.9" height="20.8" />
<path d="m487.9,249.7c-16.3-16.3-42.7-16.3-59,0l-22.1,22.1v-112.5c0-3.1-1-5.2-3.1-7.3l-137.3-137.3c-2.1-2.1-4.2-3.1-7.3-3.1h-237.2c-6.2,0-10.4,4.2-10.4,10.4v468.1c0,6.2 4.2,10.4 10.4,10.4h374.5c6.2,0 10.4-4.2 10.4-11.4v-99.3l81.1-81.1c16.3-16.3 16.3-42.7 0-59zm-218.4-202.8l101.9,101.9h-101.9v-101.9zm116.5,432.8h-353.7v-447.3h216.4v126.9c0,6.2 4.2,10.4 10.4,10.4h126.9v122.9l-99.2,99.2-8.8,67.8 67.8-8.8 40.3-40.3v69.2zm87.2-186.1l-136.8,136.8-35,5.7 5.7-35 136.8-136.8c8.1-8.1 21.2-8.1 29.3,0 8.1,8.1 8.1,21.2 0,29.3z" />
</g>
</svg>
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__content">
<div class="uix-card--gallery__content__child">
<div class="uix-card--gallery__content__child--left">
<div>
<!-- content begin -->
<span style="margin: 0 10px 10px; display: block;">
<h5 class="uix-t-ellipsis" style="margin: 10px; margin-left: 0; margin-bottom: 0; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
</span>
<!-- content end -->
</div>
</div>
<div class="uix-card--gallery__content__child--right" style="min-width: 50px;">
<!-- content begin -->
<div class="uix-card--gallery__action" style="margin: 10px;">
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
</div>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="uix-card--gallery uix-card--gallery--horizontal is-mobile-still" role="figure">
<div class="uix-card--gallery__preview" style="padding: 25px; background: #EAEAEA;">
<!-- image begin -->
<svg width="30" height="30" viewBox="0 0 512 512">
<g>
<rect width="109.2" x="82.3" y="96.9" height="20.8" />
<rect width="109.2" x="82.3" y="158.2" height="20.8" />
<rect width="256.9" x="82.3" y="218.6" height="20.8" />
<rect width="256.9" x="82.3" y="278.9" height="20.8" />
<path d="m487.9,249.7c-16.3-16.3-42.7-16.3-59,0l-22.1,22.1v-112.5c0-3.1-1-5.2-3.1-7.3l-137.3-137.3c-2.1-2.1-4.2-3.1-7.3-3.1h-237.2c-6.2,0-10.4,4.2-10.4,10.4v468.1c0,6.2 4.2,10.4 10.4,10.4h374.5c6.2,0 10.4-4.2 10.4-11.4v-99.3l81.1-81.1c16.3-16.3 16.3-42.7 0-59zm-218.4-202.8l101.9,101.9h-101.9v-101.9zm116.5,432.8h-353.7v-447.3h216.4v126.9c0,6.2 4.2,10.4 10.4,10.4h126.9v122.9l-99.2,99.2-8.8,67.8 67.8-8.8 40.3-40.3v69.2zm87.2-186.1l-136.8,136.8-35,5.7 5.7-35 136.8-136.8c8.1-8.1 21.2-8.1 29.3,0 8.1,8.1 8.1,21.2 0,29.3z" />
</g>
</svg>
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__content">
<div class="uix-card--gallery__content__child">
<div class="uix-card--gallery__content__child--left">
<div>
<!-- content begin -->
<span style="margin: 0 10px 10px; display: block;">
<h5 style="margin: 10px 0; margin-bottom: 0; padding-bottom: 0;">Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title Long title</h5>
<small class="uix-typo--color-sub">0/15/18</small>
</span>
<!-- content end -->
</div>
</div>
<div class="uix-card--gallery__content__child--right" style="min-width: 50px;">
<!-- content begin -->
<div class="uix-card--gallery__action" style="margin: 10px;">
<button aria-haspopup="true">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</button>
</div>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-12">
<div class="uix-card--gallery uix-card--gallery--horizontal" role="figure">
<div class="uix-card--gallery__preview" style="background-image: url(https://via.placeholder.com/1920x1080);background-position: center center;background-size: cover;background-repeat: no-repeat;width: 66.6%;">
<!-- image begin -->
<img src="https://via.placeholder.com/1920x1080" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 30px; display: block;">
<small class="uix-typo--color-sub">Categories</small>
<h3>Full-stack Designer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel. consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel</p>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-12">
<div class="uix-card--gallery uix-card--gallery--horizontal" role="figure">
<div class="uix-card--gallery__preview" style="background-image: url(https://via.placeholder.com/1920x600);background-position: center center;background-size: cover;background-repeat: no-repeat;width: 33.3%;">
<!-- image begin -->
<img src="https://via.placeholder.com/1920x600">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 30px; display: block;">
<small class="uix-typo--color-sub">Categories</small>
<h3>Full-stack Designer</h3>
<p>Focus on user interface, user experience, awesome websites, front-end and WordPress development.</p>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="uix-card--gallery" role="figure">
<div class="uix-card--gallery__preview">
<!-- image begin -->
<img src="https://via.placeholder.com/1920x600" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 30px; display: block;">
<small class="uix-typo--color-sub">Categories</small>
<h3>Full-stack Designer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="uix-card--gallery uix-card--gallery--overlay" role="figure">
<div class="uix-card--gallery__preview">
<!-- image begin -->
<img src="https://via.placeholder.com/1920x1080" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span class="uix-typo--color-white" style="margin: 30px; display: block;">
<small class="uix-typo--color-sub">Categories</small>
<h4 class="uix-spacing--no">Full-stack Designer</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-12">
<div class="uix-card--gallery" role="figure">
<div class="uix-card--gallery__preview">
<!-- image begin -->
<img src="https://via.placeholder.com/1920x309" alt="">
<!-- image end -->
<!-- icons begin -->
<div class="uix-card--gallery__status">
<div class="uix-card--gallery__status__item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 469.33 469.33" fill="currentColor">
<path d="M320 213.33c35.3 0 63.79-28.69 63.79-64 0-35.3-28.48-64-63.79-64-35.3 0-64 28.7-64 64 0 35.31 28.7 64 64 64zM149.33 213.33c35.31 0 63.79-28.69 63.79-64 0-35.3-28.48-64-63.79-64-35.3 0-64 28.7-64 64 0 35.31 28.7 64 64 64zM149.33 256C99.52 256 0 280.96 0 330.67V384h298.67v-53.33c0-49.71-99.52-74.67-149.34-74.67zM320 256c-6.19 0-13.12.43-20.59 1.17 24.75 17.82 41.92 41.82 41.92 73.5V384h128v-53.33c0-49.71-99.52-74.67-149.33-74.67z"></path>
</svg>3,3434</div>
<div class="uix-card--gallery__status__item">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 469.33 469.33">
<path d="M234.67 170.67c-35.31 0-64 28.69-64 64s28.69 64 64 64 64-28.7 64-64-28.7-64-64-64z"></path>
<path d="M234.67 74.67C128 74.67 36.9 141 0 234.67c36.9 93.65 128 160 234.67 160 106.77 0 197.76-66.35 234.66-160-36.9-93.66-127.89-160-234.66-160zm0 266.66c-58.88 0-106.67-47.78-106.67-106.66S175.79 128 234.67 128s106.66 47.79 106.66 106.67-47.78 106.66-106.66 106.66z"></path>
</svg>124</div>
<div class="uix-card--gallery__status__item">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 475.43 475.43">
<path d="M306.9 164.57l78.9-86.2a7.83 7.83 0 001.56-8.36 8.36 8.36 0 00-7.3-4.7h-253.4s-3.13 0-3.13.52v-9.4a26.12 26.12 0 0021.94-27.7A28.73 28.73 0 00117.26 0a29.78 29.78 0 00-29.78 28.73 30.82 30.82 0 0020.37 27.7v411.16a7.84 7.84 0 0015.68 0V263.84h256.52c3.2.2 6.17-1.7 7.31-4.7a8.36 8.36 0 00-1.56-8.36l-78.9-86.2z"></path>
</svg>June 1</div>
<div class="uix-card--gallery__status__item">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 411.14 411.14">
<path d="M350.2 54.53H61.45C27.64 54.53 0 82.18 0 115.97v179.2c0 33.8 27.65 61.44 61.44 61.44H349.7c33.79 0 61.44-27.65 61.44-61.44v-179.2c.5-33.8-27.14-61.44-60.93-61.44zM287.75 210.7a11.96 11.96 0 01-3.58 3.59l-119.3 70.65a9.93 9.93 0 01-13.82-3.58 8.65 8.65 0 01-1.54-5.12V134.92c0-5.64 4.61-10.24 10.24-10.24 1.54 0 3.59.5 5.12 1.53l119.3 70.66c4.6 3.07 6.66 9.21 3.58 13.82z"></path>
</svg>13</div>
</div>
<!-- icons end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span style="margin: 30px; display: block;">
<h4 class="uix-spacing--no">Full-stack Designer</h4>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-12">
<div class="uix-card--gallery" role="figure">
<div class="uix-card--gallery__preview">
<!-- image begin -->
<img src="https://via.placeholder.com/1920x309" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<!-- menu group begin -->
<div class="uix-card--gallery__menu">
<div class="uix-card--gallery__menu__avatar">
<img src="https://via.placeholder.com/150x150" alt="" class="uix-border--circle">
<span>UIUX Lab</span>
</div>
<div class="uix-card--gallery__menu__items">
<a>Link 1</a>
<a class="is-active">Link 2</a>
<a>Link 3</a>
<a>Link 4</a>
</div>
<div class="uix-card--gallery__menu__action">
<button>2,321</button>
<button>Follow</button>
</div>
</div>
<!-- menu group end -->
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-12">
<div class="uix-card--gallery uix-card--gallery--overlay" role="figure">
<div class="uix-card--gallery__preview">
<!-- image begin -->
<img src="https://via.placeholder.com/1920x1080" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body uix-core-grid__col-5 uix-core-grid__mobile-stack">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span class="uix-typo--color-white" style="margin: 30px; display: block;">
<small class="uix-typo--color-sub">Categories</small>
<h4 class="uix-spacing--no">Full-stack Designer</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
<hr>
<div class="row">
<div class="col-12">
<div class="uix-card--gallery uix-card--gallery--overlay" role="figure">
<div class="uix-card--gallery__preview">
<!-- image begin -->
<img src="https://via.placeholder.com/1920x1080" alt="">
<!-- image end -->
</div>
<div class="uix-card--gallery__body uix-card--gallery__body--verticalCenter uix-core-grid__col-5 uix-core-grid__mobile-stack">
<div class="uix-card--gallery__header">
<div class="uix-card--gallery__header__child">
<!-- content begin -->
<span class="uix-typo--color-white" style="margin: 30px; display: block;">
<h4 class="uix-spacing--no">Full-stack Designer</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--secondary is-pill is-fill-white">Check Out</a>
</span>
<!-- content end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
</main>
section {
position: relative;
}
body {
margin: 0;
padding: 20px;
}
img {
max-width: 100%;
}
.uix-border--circle {
border-radius: 100%;
}
a {
text-decoration: none;
}
#uix-maincontent {
display: block;
max-width: 1200px;
margin: 0 auto;
}
/* ======================================================
<!-- Cards (https://github.com/xizon/uix-kit) -->
/* ====================================================== */
/*
* 1. Gallery Card (via Flex)
* 1. Thumbnail Card (via Flex)
*/
$card-radius: 8px;
/*
---------------------------
1. Gallery Card
---------------------------
*/
.uix-card--gallery {
box-sizing: border-box;
position: relative;
display: inline-flex;
flex-direction: column;
max-width: 100%; /* Prevent text overflow with no-wrap */
/* demo style */
box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1);
border-radius: $card-radius;
.uix-card--gallery__preview,
.uix-card--gallery__body {
display: flex; /* nested flex container */
flex-direction: column; /* vertical alignment of flex items */
justify-content: center; /* center flex items vertically */
}
.uix-card--gallery__preview {
align-items: center; /* center flex items horizontally */
padding: 0; /* default value, this attribute can be specified in HTML */
box-sizing: border-box;
position: relative;
border-radius: $card-radius $card-radius 0 0;
img {
object-fit: cover;
object-position: center;
height: 100%;
width: 100%;
border-radius: $card-radius $card-radius 0 0;
}
/* Use a :before to show the selection outline so that the border doesn't
* affect the layout of the content within the preview. */
&::before {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
block-size: 100%;
box-sizing: border-box;
border-radius: inherit;
border: 1px solid transparent;
}
}
.uix-card--gallery__header {
display: flex;
align-items: center; /* center flex items horizontally */
.uix-card--gallery__header__child {
display: flex;
flex: 1;
word-break: break-all;
align-items: center;
max-width: 100%;
small {
white-space: nowrap;
}
}
}
.uix-card--gallery__content {
> .uix-card--gallery__content__child {
display: flex;
flex-direction: row;
align-items: center;
.uix-card--gallery__content__child--left {
display: flex;
flex-direction: row;
flex: 1;
align-items: center; /* center flex items horizontally */
word-break: break-all;
min-width: 0; /* prevents flex-boxes of becoming smaller than it's contents -- for rows */
> div {
line-height: 1.25;
margin-left: .5rem;
width: 100%;
}
}
.uix-card--gallery__content__child--right {
min-width: 50px; /* default value, this attribute can be specified in HTML */
}
}
}
.uix-card--gallery__body {
flex: 1;
max-width: 100%; /* Prevent text overflow with no-wrap when horizontal type is used */
min-width: 0; /* prevents flex-boxes of becoming smaller than it's contents -- for rows */
}
.uix-card--gallery__action {
display: flex;
flex: 1;
margin-left: 1rem;
justify-content: flex-end; /* end flex items vertically */
}
/*-- horizontal layout --*/
&.uix-card--gallery--horizontal {
flex-direction: row;
.uix-card--gallery__preview {
border-radius: $card-radius 0 0 $card-radius;
img {
visibility: hidden;
border-radius: $card-radius 0 0 $card-radius;
}
}
.uix-card--gallery__header {
.uix-card--gallery__header__child {
display: block;
}
}
}
/*-- overlay layout --*/
&.uix-card--gallery--overlay {
.uix-card--gallery__preview {
border-radius: $card-radius;
img {
border-radius: $card-radius;
}
}
.uix-card--gallery__body {
position: absolute;
bottom: 0;
left: 0;
&.uix-card--gallery__body--verticalCenter {
height: 100%;
}
}
}
/*-- Menu Group --*/
.uix-card--gallery__status {
position: absolute;
justify-content: center;
display: flex;
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
.uix-card--gallery__status__item {
display: flex;
align-items: center;
color: #fff;
padding: 0.5rem 1rem;
white-space: nowrap;
svg {
width: 20px;
margin-right: .5rem;
}
}
}
.uix-card--gallery__menu {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.1);
border-radius: 0 0 4px 4px;
padding: 0 25px;
z-index: 2;
.uix-card--gallery__menu__avatar {
display: flex;
align-items: center;
> span {
white-space: nowrap;
}
img {
width: 42px;
height: 42px;
object-fit: cover; /* required */
margin-right: 15px;
}
}
.uix-card--gallery__menu__items {
display: flex;
cursor: pointer;
> a {
padding: 20px;
transition: all 500ms ease-in-out;
&.is-active,
&:hover {
border-bottom: 3px solid #f00;
color: #f00;
}
}
}
.uix-card--gallery__menu__action {
display: flex;
button {
border: 1px solid #dcdcdc;
color: #C9C9C9;
border-radius: 25px 0 0 25px;
padding: .5rem 1rem;
font-weight: 600;
font-size: 0.75rem;
cursor: pointer;
background-color: transparent;
&:last-child {
border-radius: 0 25px 25px 0;
margin-left: -1px;
}
&:hover {
background-color: #FAFAFA;
}
}
}
}
/*
If you do not use "justify-content: space-between; ",
you need to use the following to achieve the layout
*/
/*
.uix-card--gallery__menu {
display: flex;
.uix-card--gallery__menu__items {
display: flex;
margin-left: auto;
}
.uix-card--gallery__menu__action {
display: flex;
margin-left: auto;
}
}
*/
/*-- rxtra elements style --*/
button {
background-color: rgba(0, 0, 0, 0);
border-color: rgba(0, 0, 0, 0);
color: rgb(75, 75, 75);
&:active {
background-color: rgb(225, 225, 225);
border-color: rgb(225, 225, 225);
color: rgb(44, 44, 44);
box-shadow: none;
}
}
}
@media all and (max-width: 768px) {
.uix-card--gallery {
/*-- horizontal layout --*/
&.uix-card--gallery--horizontal:not(.is-mobile-still) {
flex-direction: column;
.uix-card--gallery__preview {
border-radius: $card-radius $card-radius 0 0;
img {
border-radius: $card-radius $card-radius 0 0;
}
}
}
/*-- Menu Group --*/
.uix-card--gallery__menu {
flex-direction: column;
.uix-card--gallery__menu__avatar {
margin: 1rem;
}
.uix-card--gallery__menu__action {
margin: 1rem;
}
}
}
}
/*
---------------------------
2. Thumbnail Card
---------------------------
*/
.uix-card--thumb {
box-sizing: border-box;
position: relative;
display: inline-flex;
flex-direction: column;
max-width: 100%; /* Prevent text overflow with no-wrap */
/* demo style */
padding: 1rem;
box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1);
border-radius: $card-radius;
.uix-card--thumb__header {
display: inline-flex;
flex-direction: row;
align-items: center; /* center flex items horizontally */
.uix-card--thumb__preview {
flex-basis: 50px; /* default value, this attribute can be specified in HTML */
margin-right: 5px;
}
.uix-card--thumb__content {
/* ----- Keep the width of the picture fixed ----- begin */
flex: 1;
min-width: 0; /* prevents flex-boxes of becoming smaller than it's contents -- for rows */
/* ----- Keep the width of the picture fixed ----- end */
> .uix-card--thumb__content__child {
display: flex;
flex-direction: row;
.uix-card--thumb__content__child--left {
display: flex;
flex-direction: row;
flex: 1;
align-items: center; /* center flex items horizontally */
word-break: break-all;
min-width: 0; /* prevents flex-boxes of becoming smaller than it's contents -- for rows */
> div {
line-height: 1.25;
margin-left: .5rem;
width: 100%;
}
}
.uix-card--thumb__content__child--right {
min-width: 50px; /* default value, this attribute can be specified in HTML */
}
}
}
}
.uix-card--thumb__body {
padding-top: .5rem;
line-height: 1.25;
}
/*-- rxtra elements style --*/
button {
background-color: rgba(0, 0, 0, 0);
border-color: rgba(0, 0, 0, 0);
color: rgb(75, 75, 75);
&:active {
background-color: rgb(225, 225, 225);
border-color: rgb(225, 225, 225);
color: rgb(44, 44, 44);
box-shadow: none;
}
}
}
/* Cards (https://github.com/xizon/uix-kit) */
External CSS
- https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css
- https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css
External JavaScript
This Pen doesn't use any external JavaScript resources.