uix-kit

<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <meta charset="utf-8" /> <title>Cards - Uix Kit</title>  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge">       <link rel="stylesheet" href="assets/css/bootstrap.min.css?ver=5.2.3" media="all"/> <link rel="stylesheet" href="assets/css/video.min.css?ver=7.4.1" media="all"/>  <link rel="stylesheet" href="assets/fonts/fontawesome/css/all.min.css?ver=5.7.0"> <link rel="stylesheet" href="assets/fonts/fontawesome/css/v4-shims.min.css?ver=5.7.0">  <link rel="stylesheet" href="../dist/css/uix-kit.min.css?ver=oBL6UJILNcsxGifiirVQ"/>    <script src="assets/js/min/jquery.min.js?ver=3.6.1"></script> <script src="assets/js/min/modernizr.min.js?ver=3.5.0"></script>   <script src="assets/js/min/prefixfree.min.js?ver=1.0.7"></script>  <meta name="description" content="A free web kits for fast web design and development, compatible with Bootstrap v5."> <meta name="generator" content="Uix Kit" /> <meta name="author" content="UIUX Lab">   <link rel="icon" href="assets/images/favicon/favicon-32x32.png" type="image/x-icon"> <link rel="shortcut icon" href="assets/images/favicon/favicon-32x32.png" sizes="32x32"> <link rel="apple-touch-icon" href="assets/images/favicon/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicon/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicon/apple-touch-icon-114x114.png">  </head> <body class="page">  <div class="uix-loader">  <svg class="uix-loader__spinner is-hide-IE" viewBox="0 0 52 52"> <path d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"></path> </svg> </div> <div class="uix-loader-progress" data-txt="{progress}%"><span>0%</span></div> <div class="uix-loader-progress__line"></div>   <div class="uix-menu-mobile__toggle"> <span></span> <span></span> <span></span> </div> <div class="uix-menu-mobile__mask"></div>  <div class="uix-wrapper">  <header class="uix-header__container"> <div class="uix-header"> <div class="container"> <div class="uix-brand"> <a href="index.html"><img src="assets/images/logo.png" alt="Uix Kit"></a> </div>   <nav class="uix-menu__container"> <div class="uix-menu__inner"> <span class="uix-brand--mobile"><img src="assets/images/logo-colorful.png" alt="Uix Kit"></span> <ul class="uix-menu"> <li class="multi-column current-menu-item is-active"><a href="index.html">Components</a> <ul class="sub-menu"> <li> <span class="multi-column-title">Web Elements (Basic)</span> <ul class="sub-menu"> <li><a href="helper-classes.html">Helper Classes</a></li> <li><a href="uix-grid.html">Uix Grid</a></li> <li><a href="bootstrap-grid.html">Bootstrap Grid</a></li> <li><a href="bootstrap-24-grid.html">Bootstrap 24 Grid</a></li> <li><a href="blended-grid-layout.html">Blended Grid</a></li> <li><a href="gallery-grid-layout.html">Gallery Grid</a></li> <li><a href="spacing.html">Spacing</a></li> <li><a href="material-container.html">Material Container</a></li> <li><a href="striking.html">Striking</a></li> <li><a href="button.html">Buttons</a></li> <li><a href="overlay.html">Overlay</a></li> <li><a href="video.html">Video</a></li> <li><a href="video-background.html">Video BG</a></li> <li><a href="heading.html">Heading</a></li> <li><a href="dividing-line.html">Dividing Line</a></li> <li><a href="images.html">Images</a></li> <li><a href="responsive-images.html">Responsive Images</a></li> <li><a href="background-interaction.html">Background</a></li> <li><a href="parallax.html">Parallax</a></li> <li><a href="parallax2.html">Parallax 2</a></li> <li><a href="vertical-centering.html">Vertical Centering</a></li> <li><a href="equal-width-columns.html">Equal-width Columns</a></li> <li><a href="equal-height-columns.html">Equal-height Columns</a></li> <li><a href="align-wide-and-full-element.html">Align Wide/Full Element</a><span class="uix-bubble">new</span></li> </ul>  </li> <li> <span class="multi-column-title">Web Elements (Part 1)</span> <ul class="sub-menu"> <li><a href="toast.html">Toast</a><span class="uix-bubble">new</span></li> <li><a href="navs.html">Navs</a></li> <li><a href="breadcrumbs.html">Breadcrumbs</a></li> <li><a href="lightbox.html">Lightbox</a></li> <li><a href="modal-dialog.html">Modal Dialog</a></li> <li><a href="modal-dialog-auto.html">Modal Dialog Auto-open</a></li> <li><a href="social-meida-icons.html">Social Media Icons</a></li> <li><a href="form.html">Form Elements</a></li> <li><a href="form2.html">Form Elements 2</a></li> <li><a href="form-layout.html">Form Layout</a></li> <li><a href="form-progress.html">Form Progress</a></li> <li><a href="counter.html">Counter</a></li> <li><a href="progress-bar.html">Progress Bar</a></li> <li><a href="progress-line.html">Progress Line</a></li> <li><a href="vertical-text.html">Vertical Text</a></li> <li><a href="circle-text.html">Circle Text</a></li> <li><a href="coach-mark.html">Coach Mark</a></li> <li><a href="separator-of-rule-with-text.html">Separator of Rule With Text</a></li> <li><a href="wave-background.html">Wave Background</a></li> <li><a href="shape-animation.html">Shape Animation</a></li> <li><a href="image-animation.html">Image Animation</a></li> <li><a href="svg-map.html">SVG Map</a></li> <li><a href="floating-side-element.html">Floating Side Element</a></li> <li><a href="infinite-scrolling-element.html">Infinite Scrolling Element</a></li> </ul>  </li> <li> <span class="multi-column-title">Web Elements (Part 2)</span> <ul class="sub-menu"> <li><a href="tooltip.html">Tooltip</a></li> <li><a href="ribbon.html">Ribbon</a></li> <li><a href="footer-templates.html">Footer Templates</a></li> <li><a href="login-templates.html">Login Templates</a><span class="uix-bubble">new</span></li> <li><a href="pagination.html">Pagination</a></li> <li><a href="badges.html">Badges</a></li> <li><a href="mouse-animation-scroll.html">Mouse Animation Scroll</a></li> <li><a href="periodical-scroll.html">Periodical Scroll</a></li> <li><a href="image-shapes.html">Image Shapes</a></li> <li><a href="rotating-elements.html">Rotating Elements</a></li> <li><a href="dotted-line.html">Dotted Line</a></li> <li><a href="swiper.html">Swiper<small style="font-size: 10px;background: #51B801; color:#fff; border-radius: 5px;padding: 2px 3px;display: inline-block;margin-left: 3px;">Third-party plugin</small></a></li> <li><a href="advanced-slider.html">Advanced Slider (Basic)</a></li> <li><a href="advanced-slider-brightness.html">Advanced Slider Brightness</a></li> <li><a href="advanced-slider-liquid.html">Advanced Slider Liquid</a></li> <li><a href="advanced-slider-liquid2.html">Advanced Slider Liquid 2</a></li> <li><a href="advanced-slider-liquid3.html">Advanced Slider Liquid 3</a></li> <li><a href="advanced-slider-parallax.html">Advanced Slider Parallax</a></li> <li><a href="hybrid-content-slider.html">Hybrid Content Slider</a><span class="uix-bubble">new</span></li> <li><a href="svg-mask-slider.html">SVG Mask Slider</a><span class="uix-bubble">new</span></li> <li><a href="3D-explosive-particle-slider.html">3D Explosive Particle Slider</a></li> <li><a href="3D-liquid-scrollspy-slider.html">3D Liquid Scrollspy Slider</a><span class="uix-bubble">new</span></li> </ul>  </li> <li> <span class="multi-column-title">Contents (Part 1)</span> <ul class="sub-menu"> <li><a href="content-placeholder-animated.html">Content Placeholder Animated</a></li> <li><a href="list-posts.html">Posts List</a></li> <li><a href="fullwidth-column-to-edge.html">Full Width Column to Edge</a><span class="uix-bubble">new</span></li> <li><a href="list-side-by-side.html">Side by Side List</a></li> <li><a href="list-side-by-side-img.html">Side by Side List With Photo</a></li> <li><a href="list-bulleted.html">Bulleted List</a></li> <li><a href="list-brands.html">Brands List</a></li> <li><a href="list-maintain-aspect-ratio.html">Maintain Aspect Ratio List</a></li> <li><a href="single-post.html">Single Post</a></li> <li><a href="sidebar.html">Sidebar</a></li> <li><a href="contact.html">Contact Form With Map</a></li> <li><a href="features.html">Features</a></li> <li><a href="pricing.html">Pricing</a></li> <li><a href="testimonials.html">Testimonials</a></li> <li><a href="tabs.html">Tabs</a></li> <li><a href="accordion.html">Accordion</a></li> <li><a href="accordion-img.html">Accordion Background Images</a></li> <li><a href="gallery.html">Gallery Normal</a></li> <li><a href="gallery-filter.html">Gallery Filterable</a></li> <li><a href="gallery-masonry.html">Gallery Masonry</a></li> <li><a href="gallery-masonry-ajax.html">Gallery Masonry With Ajax</a><span class="uix-bubble">new</span></li> </ul>  </li> <li> <span class="multi-column-title">Contents (Part 2)</span> <ul class="sub-menu"> <li><a href="card.html">Cards</a></li> <li><a href="table-series.html">Table</a></li> <li><a href="table-sorter.html">Table Sorter</a></li> <li><a href="timeline.html">Timeline</a></li> <li><a href="multi-items-carousel.html">Multiple Items Carousel</a></li> <li><a href="team-fullwidth.html">Team Fullwidth</a></li> <li><a href="team-grid.html">Team Grid</a></li> <li><a href="team-focus.html">Team Focus</a></li> <li><a href="circle-layout.html">Circle Layout</a></li> <li><a href="3D-carousel.html">3D Carousel</a></li> <li><a href="3D-gallery.html">3D Gallery (threejs)</a></li> <li><a href="cascading-dropdown-list.html">Cascading DropDown List</a><span class="uix-bubble">new</span></li> </ul>  </li> <li> <span class="multi-column-title">Interaction (Part 1)</span> <ul class="sub-menu"> <li><a href="sticky-elements.html">Sticky Elements</a></li> <li><a href="scroll-reveal.html">Scroll Reveal</a></li> <li><a href="scrollspy-animate.html">Scrollspy Animate</a><span class="uix-bubble">new</span></li> <li><a href="skew-on-scroll.html">Skew on Scroll</a><span class="uix-bubble">new</span></li> <li><a href="text-effect.html">Text Effect</a><span class="uix-bubble">new</span></li> <li><a href="smooth-scrolling-page.html">Smooth Scrolling Page</a></li> <li><a href="list-posts-with-ajax.html">Ajax Load Posts</a></li> <li><a href="list-posts-with-ajax2.html">Ajax Load Posts 2</a></li> <li><a href="list-posts-with-ajax-infinitescroll.html">Infinite Scroll Posts</a></li> <li><a href="show-more-less.html">Show More Less</a></li> <li><a href="mousewheel-interaction.html">Mousewheel Interaction</a></li> <li><a href="hover-delay-interaction.html">Hover Delay Interaction</a></li> <li><a href="one-page.html">Full Page/One Page</a></li> <li><a href="one-page2.html">Full Page/One Page 2</a></li> <li><a href="ajax-page-loader.html">Ajax Page Loader</a></li> <li><a href="ajax-push-content.html">Ajax Push Content</a></li> <li><a href="3D-background.html">3D Background</a></li> <li><a href="3D-specular.html">3D Specular (threejs)</a><span class="uix-bubble">new</span></li> <li><a href="3D-background-three.html">3D Background 1 (threejs)</a></li> <li><a href="3D-background-three2.html">3D Background 2 (threejs)</a></li> <li><a href="3D-background-three3.html">3D Background 3 (threejs)</a></li> <li><a href="3D-simulate-html-layout.html">Simulate HTML Layout (threejs)</a></li> </ul>  </li> <li> <span class="multi-column-title">Interaction (Part 2)</span> <ul class="sub-menu"> <li><a href="3D-pages.html">3D Pages</a></li> <li><a href="3D-particle-effect.html">3D Particle Effect</a></li> <li><a href="3D-sphere-three.html">3D Sphere Rotation</a></li> <li><a href="3D-obj-anim-interaction.html">3D Object Anim Interaction</a></li> <li><a href="3D-image-transition.html">3D Image Transition (threejs)</a></li> <li><a href="3D-mouse-interaction.html">3D Mouse Interaction (threejs)</a></li> <li><a href="3D-mouse-interaction2.html">3D Mouse Interaction2 (threejs)</a></li> <li><a href="3D-model.html">3D Model</a></li> <li><a href="3D-filmic-effects.html">3D Filmic Effects</a><span class="uix-bubble">new</span></li> </ul>  </li> </ul> </li> <li><a href="#">Menu</a> <ul class="sub-menu"> <li><a href="mega-menu.html">Mega Menu</a></li> <li><a href="mega-menu-rtl.html">Mega Menu(RTL)</a></li> <li><a href="dropdown-menu.html">Dropdown Menu</a></li> <li><a href="dropdown-menu2.html">Dropdown Menu 2(Multi-level)</a></li> <li><a href="vertical-menu.html" target="_blank">Vertical Menu</a></li> <li><a href="lava-lamp-style-menu.html">Lava-Lamp Style Menu</a><span class="uix-bubble">new</span></li> </ul>  </li> <li><a href="typography.html">Typography</a> <ul class="sub-menu"> <li><a href="typography.html">LTR</a></li> <li><a href="typography-rtl.html">RTL</a></li> <li><a href="typography-cn.html">中文</a></li> </ul> </li> <li><a href="sample-page-1.html">Sample Pages</a> <ul class="sub-menu"> <li><a href="sample-page-1.html">Sample Page 1</a></li> <li><a href="sample-page-2.html">Sample Page 2</a></li> </ul> </li> </ul> <div class="uix-menu__right-box"> <a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Follow us on Twitter" href="https://twitter.com/uiux_lab" target="_blank"> <i class="fa fa-twitter"></i> </a> <a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Follow us on Facebook" href="https://www.facebook.com/uiuxlabhome" target="_blank"> <i class="fa fa-facebook"></i> </a> <a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Fork on Github" href="https://github.com/xizon/uix-kit" target="_blank"> <i class="fa fa-github"></i> </a> </div> </div> </nav>  </div>  <div class="uix-clearfix"></div> </div> </header> <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div> <main id="uix-maincontent">  <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>  </div>  </section>  <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;">  <img src="assets/images/demo/avatar.jpg" alt="" class="uix-border--circle">  </div> <div class="uix-card--thumb__content"> <div class="uix-card--thumb__content__child"> <div class="uix-card--thumb__content__child--left"> <div>  <strong>Long title Long title Long title Long title Long title Long title Long title Long title </strong>  </div> </div> <div class="uix-card--thumb__content__child--right" style="min-width: 50px; text-align: right;">  <button aria-haspopup="true"> <i class="fa fa-ellipsis-h" aria-hidden="true"></i> </button>  </div> </div> </div> </div> <div class="uix-card--thumb__body">  <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>  </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;">  <img src="assets/images/demo/avatar.jpg" alt="" class="uix-border--circle">  </div> <div class="uix-card--thumb__content"> <div class="uix-card--thumb__content__child"> <div class="uix-card--thumb__content__child--left"> <div>  <h5 class="uix-t-ellipsis uix-spacing--no">Title</h5> <small class="uix-typo--color-sub">@https://uiux.cc</small>  </div> </div> <div class="uix-card--thumb__content__child--right" style="min-width: 50px; text-align: right;">  <button aria-haspopup="true"> <i class="fa fa-ellipsis-h" aria-hidden="true"></i> </button>  </div> </div> </div> </div> <div class="uix-card--thumb__body">  <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>  </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;">  <img src="assets/images/demo/avatar.jpg" alt="" class="uix-border--circle">  </div> <div class="uix-card--thumb__content"> <div class="uix-card--thumb__content__child"> <div class="uix-card--thumb__content__child--left"> <div>  <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>  </div> </div> <div class="uix-card--thumb__content__child--right" style="min-width: 50px; text-align: right;">  <button aria-haspopup="true"> <i class="fa fa-ellipsis-h" aria-hidden="true"></i> </button>  </div> </div> </div> </div> <div class="uix-card--thumb__body">  <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>  </div> </div> </div> </div>  </div> </div>  </div>  </section>  <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>  </div>  </section>  <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">  <img src="assets/images/demo/spiral-galaxy-1920x1080.jpg" alt="">  </div> <div class="uix-card--gallery__body"> <div class="uix-card--gallery__header"> <div class="uix-card--gallery__header__child">  <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>  </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">  <img src="assets/images/demo/spiral-galaxy-1920x1080.jpg" alt="">  </div> <div class="uix-card--gallery__body"> <div class="uix-card--gallery__header"> <div class="uix-card--gallery__header__child">  <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>  </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">  <img src="assets/images/demo/spiral-galaxy-1920x1080.jpg" alt="">  </div> <div class="uix-card--gallery__body"> <div class="uix-card--gallery__header"> <div class="uix-card--gallery__header__child">  <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>  </div> </div> </div> </div> </div> </div>  <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;">  <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>  </div> <div class="uix-card--gallery__body"> <div class="uix-card--gallery__header"> <div class="uix-card--gallery__header__child">  <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>  </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;">  <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>  </div> <div class="uix-card--gallery__body"> <div class="uix-card--gallery__header"> <div class="uix-card--gallery__header__child">  <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>  </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;">  <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>  </div> <div class="uix-card--gallery__body"> <div class="uix-card--gallery__header"> <div class="uix-card--gallery__header__child">  <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>  </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;">  <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