Card

Amazon web service Scalable Cloud Infrastructure
Build, Deploy, and Manage Websites

Usage

<nile-card>
<div style="display: flex;">
<img class="alert-prefix-img" src="https://assets.aqueralabs.com/logos/aws.png" />
<nile-icon name="drag" class="drag-icon"> </nile-icon>
</div>
<div class="amazon-service">Amazon web service Scalable Cloud Infrastructure</div>
<div class="service-description">Build, Deploy, and Manage Websites</div>
<div slot="footer" class="footer-link">https://api.aquera.io/scim/5efdcsd</div>
</nile-card>

Without footer

Amazon web service Scalable Cloud Infrastructure
Build, Deploy, and Manage Websites

Usage

<nile-card>
<div style="display: flex;">
<img class="alert-prefix-img" src="https://assets.aqueralabs.com/logos/aws.png" />
<nile-icon name="drag" class="drag-icon"> </nile-icon>
</div>
<div class="amazon-service">Amazon web service Scalable Cloud Infrastructure</div>
<div class="service-description">Build, Deploy, and Manage Websites</div>
</nile-card>

With Footer

Title Support Text
You can use this space as description fo...

Usage

    <style>
.card-header {
display: flex;
align-items: center;
gap: 12px;
}

.alert-prefix-img {
height: 32px;
width: 32px;
border-radius: 4px;
}
.card-header-text {
display: inline-flex;
flex-direction: column;
width: 117px;
}
.card-header-text-heading {
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
color: #000;
}

.card-header-text-subheading {
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
color: #475467;
}

.card-body {
color: #344054;
text-overflow: ellipsis;
white-space: nowrap;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}

.footer-link {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
font-weight: 400;
line-height: 18px;
}

.right-side {
display: flex;
align-items: center;
align-content: center;
gap: 7px;
}
</style>

<nile-card>
<div class="card-header" slot="header">
<img
class="alert-prefix-img"
src="https://assets.aqueralabs.com/logos/aws.png"
height="32"
width="32"
/>

<div class="card-header-text">
<span class="card-header-text-heading">Title</span>
<span class="card-header-text-subheading">Support Text</span>
</div>
<nile-slide-toggle></nile-slide-toggle>
<nile-icon name="dropdown" class="drag-icon" size="20"> </nile-icon>
</div>
<div class="card-body">
You can use this space as description fo...
</div>
<div slot="footer" class="footer-link">
<nile-avatar name="Aquera Labs" isRounded></nile-avatar>
<span class="right-side">
<nile-icon name="calendar"></nile-icon>
Hello
</span>
</div>
</nile-card>

Slots And Parts

Name Description
(default) For the body content
base For the whole card.
body__wrapper For the parent of header and body.
header For the header of the card.
body For the Body of the card.
footer For the Footer of the card.