Getting Started
Layout
Components
Design
Card
In web design, the card is frequently used to display a container with a visual style and some content, typically an image, a title, and a description.
Using our pre-defined classes you can easily create a simple and intuitive card desgin.
Card Title
Lorem ipsum dolor sit, amet consectetur, velit natus Lorem ipsum dolor sit velit natus Lorem sit velit natus.
Read More<div class="null-box-shadow null-padding-20 null-border-radius">
<img class="null-border-radius" src=""/>
<h3 class="null-margin-top-20 null-color-main">
Card Title
</h3><!--End null-margin-top-20-->
<p class="null-color-grey null-font-size-14">
Content.
</p><!--End null-color-grey-->
<a class="null-button null-button-secondary" href="javascript:void(null)" aria-label="Read More">
Read More
</a><!--End null-button-->
</div><!--End null-box-shadow-->Do not forget to use our container grid to create a robost grid view for cards:
Card Title
Lorem ipsum dolor sit, amet consectetur, velit natus Lorem ipsum dolor sit velit natus Lorem sit velit natus.
Read More
Card Title
Lorem ipsum dolor sit, amet consectetur, velit natus Lorem ipsum dolor sit velit natus Lorem sit velit natus.
Read More
Card Title
Lorem ipsum dolor sit, amet consectetur, velit natus Lorem ipsum dolor sit velit natus Lorem sit velit natus.
Read More<div class="null-display-grid null-container-grid-3 null-gap-20 null-margin-top-20 null-margin-bottom-20">
<div class="null-box-shadow null-padding-20 null-border-radius">
<img class="null-border-radius" src=""/>
<h3 class="null-margin-top-20 null-color-main">
Card Title
</h3><!--End null-margin-top-20-->
<p class="null-color-grey null-font-size-14">
Content.
</p><!--End null-color-grey-->
<a class="null-button null-button-secondary" href="javascript:void(null)" aria-label="Read More">
Read More
</a><!--End null-button-->
</div><!--End null-box-shadow-->
<div class="null-box-shadow null-padding-20 null-border-radius">
<img class="null-border-radius" src=""/>
<h3 class="null-margin-top-20 null-color-main">
Card Title
</h3><!--End null-margin-top-20-->
<p class="null-color-grey null-font-size-14">
Content.
</p><!--End null-color-grey-->
<a class="null-button null-button-secondary" href="javascript:void(null)" aria-label="Read More">
Read More
</a><!--End null-button-->
</div><!--End null-box-shadow-->
<div class="null-box-shadow null-padding-20 null-border-radius">
<img class="null-border-radius" src=""/>
<h3 class="null-margin-top-20 null-color-main">
Card Title
</h3><!--End null-margin-top-20-->
<p class="null-color-grey null-font-size-14">
Content.
</p><!--End null-color-grey-->
<a class="null-button null-button-secondary" href="javascript:void(null)" aria-label="Read More">
Read More
</a><!--End null-button-->
</div><!--End null-box-shadow-->
</div><!--End null-display-grid-->However, we have created a null card and it is a customizable card design that comes with pre-defined empty classes, allowing you to modify it according to your needs.
Lorem ipsum dolor sit, amet consectetur adipisicing elit.cumque, quia laboriosam asperiores dolorem.
<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">
<div class="null-card-image-container null-position-relative">
<img class="null-card-image" src="" width="625" height="460" alt="Null Image"/>
<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">
<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-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">
Floating Box
</div><!--End null-card-floating-box-->
</div><!--End null-card-floating-box-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-padding-20-->
</div><!--End null-card-container-->
</div><!-- null-display-grid -->The card consists of several containers, which you can modify to suit your needs:
.null-card-container: This container has a border top right and left null-border-radius, giving the card a curved appearance.
.null-card-image-container: This container also has a border top right and left null-border-radius, and an overlay for the image.
.null-card-title-container: This container has the clickable card title.
.null-card-content-container: This container has the card content.
.null-card-floating-box-container: This container has a box that can be used to display additional information. It is located between the image and the title, and is positioned on the right in LTR direction and on the left in RTL direction.
.null-card-items-container: This container can be used to display additional items, such as dates, prices, or number of students.
The CSS for card as below:
.null-card-container .null-card-image-container img{
border-top-left-radius: var(--null-border-radius);
border-top-right-radius: var(--null-border-radius);
}
.null-card-container .null-card-floating-box-container{
position: absolute;
top: -15px;
right: 10px;
left: auto;
min-width: 100px;
}
.null-card-image-overlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-top-left-radius: var(--null-border-radius);
border-top-right-radius: var(--null-border-radius);
background: linear-gradient(0deg,rgb(0 0 0 / 62%) 0,transparent 100%)
}
.null-rtl .null-card-container .null-card-floating-box-container{
left: 10px;
right: auto;
}