
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. |