Getting Started
Layout
Components
Design
Card UI
Utilize our card examples to effortlessly design your website, make sure that "null-components" CSS file is included in your project.
Example 1:
<div class="null-display-grid null-container-grid-3 null-gap-20">
<a href="javascript:void(null)">
<div class="null-card-container null-box-shadow null-border-radius card-example-1">
<div class="null-card-image-container null-position-relative">
<img class="null-card-image" src="" width="" height="" alt="" />
<div class="null-card-image-overlay"></div>
</div><!--End null-card-image-container-->
<div class="null-padding-20 null-position-relative">
<div class="null-card-title-container null-position-relative null-margin-bottom-30">
<h3 class="null-card-title null-font-weight-bold null-font-size-18 null-background-light-grey null-color-main null-padding-10 null-position-absolute null-border-radius">
Title
</h3><!--End null-card-title-->
</div><!--End null-card-title-container-->
<div class="null-card-content-container">
<div class="null-color-grey null-font-size-13">October 01,2023</div>
<p class="null-card-content null-font-size-14 null-color-grey">
Content
</p><!--End null-card-content-->
</div><!--End null-card-content-container-->
</div><!--End null-padding-20-->
</div><!--End null-card-container-->
</a>
</div><!--End null-display-grid-->/* Start Card Example 1 */
.card-example-1 .null-card-title {
bottom: -15px;
min-height: 65px;
width: 100%;
}
/* End Card Example 1 */Example 2:
<div class="null-display-grid null-container-grid-3 null-gap-20">
<a href="javascript:void(null)">
<div class="null-card-container null-box-shadow null-border-radius card-example-2">
<div class="null-card-image-container null-position-relative">
<img class="null-card-image" src="" width="" height="" alt="" />
<div class="null-card-image-overlay"></div>
</div><!--End null-card-image-container-->
<div class="null-position-relative">
<div class="null-card-title-container">
<h3 class="null-card-title null-font-weight-bold null-color-main null-font-size-18">
Title
</h3><!--End null-card-title-->
</div><!--End null-card-title-container-->
<div class="null-card-content-container">
<p class="null-card-content null-font-size-14 null-color-grey text-align-justify">
Content
</p><!--End null-card-content-->
</div><!--End null-card-content-container-->
</div><!--End null-padding-20-->
</div><!--End null-card-container-->
</a>
</div><!--End null-display-grid-->/* Start Card Example 2 */
.card-example-2 .null-card-title-container {
padding:20px 20px 0;
}
.card-example-2 .null-card-content {
max-height: 100px;
overflow: hidden;
margin-bottom: 0;
padding:0 20px;
}
.card-example-2 .null-card-content::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 35px;
background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 60%)), to(rgb(255 255 255)));
background: -o-linear-gradient(top, hsla(0, 0%, 100%, 60%), rgb(255 255 255));
background: linear-gradient(180deg, hsla(0, 0%, 100%, 60%), rgb(255 255 255));
border-bottom-left-radius: var(--null-border-radius);
border-bottom-right-radius: var(--null-border-radius);
}
/* End Card Example 2 */Example 3:
<div class="null-display-grid null-container-grid-3 null-gap-20">
<a href="javascript:void(null)">
<div class="null-card-container null-box-shadow null-border-radius card-example-3">
<div class="null-card-image-container null-position-relative">
<img class="null-card-image" src="" width="" height="" alt="" />
<div class="null-card-image-overlay"></div>
</div><!--End null-card-image-container-->
<div class="null-card-wave-container null-position-relative">
<svg class="null-card-wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"></use>
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"></use>
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"></use>
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"></use>
</g>
</svg><!--End null-card-wave-->
</div>
<div class="null-padding-20 null-position-relative">
<div class="null-card-title-container">
<h3 class="null-card-title null-font-weight-bold null-color-main null-font-size-18">
Title
</h3><!--End null-card-title-->
</div><!--End null-card-title-container-->
<div class="null-card-content-container">
<p class="null-card-content null-font-size-14 null-color-grey">
Content
</p><!--End null-card-content-->
</div><!--End null-card-content-container-->
</div><!--End null-padding-20-->
</div><!--End null-card-container-->
</a>
</div><!--End null-display-grid-->/* Start Card Example 3 */
.card-example-3 .null-card-wave {
position: absolute;
right: 0;
bottom: -3px;
left: 0;
width: 100%;
}
.card-example-3 .null-card-title {
min-height: 55px;
}
/* End Card Example 3 */Example 4:
<div class="null-display-grid null-container-grid-3 null-gap-20">
<a href="javascript:void(null)">
<div class="null-card-container null-padding-20 null-box-shadow null-border-radius card-example-4">
<div class="null-card-image-container null-position-relative">
<img class="null-card-image" src="" width="" height="" alt="" />
<div class="null-card-image-overlay"></div>
</div><!--End null-card-image-container-->
<div class="null-position-relative">
<div class="null-card-title-container">
<h3 class="null-card-title null-font-weight-bold null-color-main null-font-size-18 null-padding-top-20">
Title
</h3><!--End null-card-title-->
</div><!--End null-card-title-container-->
<div class="null-card-content-container">
<p class="null-card-content null-font-size-14 null-color-grey">
Content
</p><!--End null-card-content-->
</div><!--End null-card-content-container-->
</div><!--End null-position-relative-->
</div><!--End null-card-container-->
</a>
</div><!--End null-display-grid-->/* Start Card Example 4 */
.card-example-4 .null-card-image-container .null-card-image , .card-example-4 .null-card-image-container .null-card-image-overlay{
border-radius: var(--null-border-radius);
}
/* End Card Example 4 */Example 5:
Lorem ipsum dolor sit amet co nsec tetur adipi sicing elit
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem iure molestiae possimus odit modi ...
Lorem
<div class="null-display-grid null-container-grid-3 null-gap-20">
<div class="null-card-container null-box-shadow null-border-radius card-example-5">
<div class="null-card-image-container null-position-relative">
<img class="null-card-image" src=" width="" height="" alt="" />
<div class="null-card-image-overlay"></div>
</div><!--End null-card-image-container-->
<div class="null-padding-20 null-position-relative">
<div class="null-card-title-container">
<h3 class="null-card-title null-font-weight-bold null-color-main null-font-size-18">
Title
</h3><!--End null-card-title-->
</div><!--End null-card-title-container-->
<div class="null-card-line-container">
<div class="null-card-line"></div>
</div><!--End null-card-line-container-->
<div class="null-card-content-container">
<p class="null-card-content null-font-size-14 null-color-grey">
Content
</p><!--End null-card-content-->
</div><!--End null-card-content-container-->
<div class="null-card-button-container">
<a class="null-button null-button-secondary" href="javascript:void(null)">
Learn More
</a><!--End null-button-->
</div><!--End null-card-button-container-->
<div
class="null-card-floating-box-container null-padding-5 null-box-shadow null-background-white null-text-align-center null-border-radius null-font-size-14">
<div class="null-card-floating-box">
Lorem
</div><!--End null-card-floating-box-->
</div><!--End null-card-floating-box-container-->
</div><!--End null-padding-20-->
</div><!--End null-card-container-->
</div><!--End null-display-grid-->/* Start Card Example 5 */
.card-example-5 .null-card-title {
min-height: 55px;
}
.card-example-5 .null-card-line {
border-bottom: 3px solid var(--null-color-light-grey);
margin-top: 5px;
}
.card-example-5 .null-card-button-container .null-button {
width: 100%;
}
/* End Card Example 5 */Example 6:
Lorem ipsum dolor sit amet co nsec tetur adipi sicing elit
Rain is liquid water in the form of droplets that have condensed from atmospheric water vapor and ...
Item One
Item Two
<div class="null-display-grid null-container-grid-4 null-gap-20">
<div class="null-card-container null-box-shadow null-border-radius card-example-6">
<div class="null-card-image-container null-position-relative">
<img class="null-card-image" src="" width="" height="" alt="" />
<div class="null-card-image-overlay"></div>
</div><!--End null-card-image-container-->
<div class="null-padding-20 null-position-relative">
<div class="null-card-title-container">
<h3 class="null-card-title null-font-weight-bold null-color-main null-font-size-18">
Title
</h3><!--End null-card-title-->
</div><!--End null-card-title-container-->
<div class="null-card-content-container">
<p class="null-card-content null-font-size-14 null-color-grey">
Content
</p><!--End null-card-content-->
</div><!--End null-card-content-container-->
<div
class="null-card-items-container">
<div class="null-card-item null-margin-bottom-10">
Item One
</div><!--End null-card-item-->
<div class="null-card-item null-margin-bottom-10">
Item Two
</div><!--End null-card-item-->
</div><!--End null-card-items-container-->
<div class="null-card-button-container null-display-flex null-align-items-center null-justify-content-space-around">
<a href="javascript:void(null)" class="null-button null-button-secondary">View</a>
<a href="javascript:void(null)" class="null-button null-button-primary">Buy</a>
</div><!--End null-card-button-container-->
</div><!--End null-padding-20-->
</div><!--End null-card-container-->
</div><!--End null-display-grid-->Example 7:
Lorem ipsum dolor sit amet co nsec tetur adipi sicing elit
Floating Box
<div class="null-display-grid null-container-grid-3 null-gap-20 null-margin-top-20 null-margin-bottom-20">
<div class="null-card-container null-box-shadow null-border-radius null-position-relative card-example-7">
<div class="null-card-shadow-container"></div>
<div class="null-card-image-container null-position-relative">
<img class="null-card-image" src="" width="" height="" alt="" />
<div class="null-card-image-overlay"></div>
</div><!--End null-card-image-container-->
<div class="null-padding-20 null-position-relative">
<div class="null-card-title-container">
<h3 class="null-card-title null-font-weight-bold null-color-main null-font-size-18 null-margin-top-10">
Title
</h3><!--End null-card-title-->
</div><!--End null-card-title-container-->
<div
class="null-card-floating-box-container null-padding-10 null-box-shadow null-background-white null-text-align-center null-border-radius null-font-size-14">
<div class="null-card-floating-box null-font-weight-bold">
Floating Box
</div><!--End null-card-floating-box-->
</div><!--End null-card-floating-box-container-->
</div><!--End null-padding-20-->
</div><!--End null-card-container-->
</div><!-- null-display-grid -->/* Start Card Example 7 */
.card-example-7 .null-card-shadow-container {
position: absolute;
top: -6px;
left: 5px;
height: 6px;
right: 5px;
background: #D8D8D8;
border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-ms-border-radius: 3px 3px 0 0;
}
.card-example-7 .null-card-shadow-container::before,
.card-example-7 .null-card-shadow-container::after {
position: absolute;
top: -6px;
left: 5px;
height: 6px;
right: 6px;
background: #D8D8D8;
border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-ms-border-radius: 3px 3px 0 0;
}
.card-example-7 .null-card-shadow-container::before {
content: "";
opacity: 0.2;
top: -12px;
left: 10px;
right: 10px;
}
.card-example-7 .null-card-shadow-container::after {
content: "";
opacity: 0.5;
}
/* End Card Example 7 */Example 8:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem iure molestiae possimus odit modi quibusdam ex neque fuga deleniti perspiciatis!
Item One
Item Two
<div class="null-display-grid null-container-grid-3 null-gap-20 ">
<div class="null-card-container null-box-shadow null-border-radius null-padding-20 card-example-8">
<div class="null-card-image-container null-position-relative">
<img class="null-card-image null-border-radius" src="" width="" height="" alt="" />
<div class="null-card-image-overlay null-border-radius"></div>
</div><!--End null-card-image-container-->
<div class="null-position-relative">
<div class="null-card-title-container">
<a class="null-card-title null-font-weight-bold null-color-main null-font-size-18"
href="javascript:void(null)" aria-label="Title">
Title
</a><!--End null-card-title-->
</div><!--End null-card-title-container-->
<div class="null-card-content-container">
<p class="null-card-content null-font-size-14 null-color-grey">
Content
</p><!--End null-card-content-->
</div><!--End null-card-content-container-->
<div
class="null-card-items-container null-display-flex null-align-items-center null-justify-content-space-around null-gap-10">
<div class="null-card-item">
Item One
</div><!--End null-card-item-->
<div class="null-card-item">
Item Two
</div><!--End null-card-item-->
</div><!--End null-card-items-container-->
</div><!--End null-position-relative-->
</div><!--End null-card-container-->
</div><!-- null-display-grid -->/* Start Card Example 8 */
.card-example-8 .null-card-image-container {
top: -45px;
margin-bottom: -20px;
}
.card-example-8 .null-card-image-container img {
box-shadow: -1px 5px 7px 5px rgb(152 152 152 / 39%);
}
.card-example-8 .null-card-title {
min-height: 60px;
}
/* End Card Example 8 */Example 9:
- Lorem ipsum
Lorem ipsum dolor sit amet consectetur
4h 33m
$550
<div class="null-display-grid null-container-grid-3 null-gap-20">
<div class="null-card-container null-box-shadow null-border-radius null-padding-20 card-example-9">
<div class="null-card-image-container null-position-relative">
<img class="null-card-image null-border-radius" src="" width="" height="" alt="" />
<div class="null-card-image-overlay null-border-radius"></div>
</div><!--End null-card-image-container-->
<div class="null-position-relative">
<ul class="null-margin-top-20 null-margin-bottom-10 null-font-size-14">
<li>Category</li><!--End null-card-title-->
</ul><!--End null-card-title-container-->
<div class="null-card-title-container null-margin-bottom-10">
<h3 class="null-card-title null-font-weight-bold null-color-main null-font-size-18">
Title
</h3><!--End null-card-title-->
</div><!--End null-card-title-container-->
<div class="null-card-line null-margin-bottom-20"></div>
<div
class="null-card-items-container null-display-flex null-align-items-center null-justify-content-space-around null-gap-10">
<div class="null-card-item null-color-grey">
4h 33m
</div><!--End null-card-item-->
<div class="null-card-item null-color-main null-font-weight-bold null-font-size-18">
$550
</div><!--End null-card-item-->
</div><!--End null-card-items-container-->
</div><!--End null-position-relative-->
</div><!--End null-card-container-->
</div><!-- null-display-grid -->/* Start Card Example 9 */
.card-example-9 ul {
list-style: disc;
padding: 0 20px;
}
.card-example-9 .null-card-title {
min-height: 40px;
}
.card-example-9 .null-card-line {
border-top: 2px solid var(--null-color-light-grey);
margin: 0 -20px;
}
/* End Card Example 9 */