uix-kit
Version:
A free web kits for fast web design and development, compatible with Bootstrap v5.
770 lines (560 loc) • 70 kB
HTML
<!DOCTYPE html>
<html lang="@@{website_lang}" dir="@@{website_dirLTR}">
<head>
<meta charset="@@{website_charset}" />
<title>Cards - @@{website_title}</title>
@@include('./src/components/_global/include-header.html')
</head>
<body class="page">
@@include('./src/components/_global/include-loader.html')
@@include('./src/components/_global/include-toggle-trigger.html')
<div class="uix-wrapper">
<!-- Header Area
============================================= -->
<header class="uix-header__container">
<div class="uix-header">
<div class="container">
@@include('./src/components/_global/include-brand.html')
@@include('./src/components/_global/include-menu.html')
</div>
<!-- .container end -->
<div class="uix-clearfix"></div>
</div>
</header>
<div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
<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="assets/images/demo/avatar.jpg" 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="assets/images/demo/avatar.jpg" 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="assets/images/demo/avatar.jpg" 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="assets/images/demo/spiral-galaxy-1920x1080.jpg" 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="assets/images/demo/spiral-galaxy-1920x1080.jpg" 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="assets/images/demo/spiral-galaxy-1920x1080.jpg" 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 uix-core-grid__col-8 uix-core-grid__mobile-stack" data-bg='{"src":"assets/images/demo/spiral-galaxy-1920x1080.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'>
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x1080.jpg" 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 uix-core-grid__col-4 uix-core-grid__mobile-stack" data-bg='{"src":"assets/images/demo/spiral-galaxy-1920x600.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0}'>
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x600.jpg">
<!-- 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 uix-core-grid__col-12 uix-core-grid__mobile-stack">
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x600.jpg" 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 uix-core-grid__col-12 uix-core-grid__mobile-stack">
<!-- image begin -->
<img src="assets/images/demo/spiral-galaxy-1920x1080.j