Basic
Card title
Description
This component is used to display content in a card format. It can be used to display information, images, with actions.
API
Supports global configuration
View the default configuration for this component. Learn more about global configuration.
import { LuiCardModule } from '@lqvrent-workspace/lqvrent-ui/card';<lui-card>
<lui-card-header luiTitle="Card title"></lui-card-header>
<lui-card-content>...</lui-card-content>
<lui-card-footer>...</lui-card-footer>
<lui-card-section>...</lui-card-section>
</lui-card>lui-card
| Property | Description | Type | Default |
|---|---|---|---|
[luiClass] | Styling class | string | defined in config |
lui-card-header
| Property | Description | Type | Default |
|---|---|---|---|
[luiTitle] | Title | string | TemplateRef<void> | - |
[luiSubtitle] | Subtitle | string | TemplateRef<void> | - |
[luiPaddingless] | Remove padding | boolean | false |
[luiBorderless] | Remove border | boolean | false |
[luiExtraLeft] | Display extra on the left | boolean | false |
lui-card-content
| Property | Description | Type | Default |
|---|---|---|---|
[luiPaddingless] | Remove padding | boolean | false |
[luiBorderless] | Remove border | boolean | false |
lui-card-section is an alias for lui-card-content.
It allows you to define which content is the main one, and which is secondary.
lui-card-footer
| Property | Description | Type | Default |
|---|---|---|---|
[luiPaddingless] | Remove padding | boolean | false |
[luiBorderless] | Remove border | boolean | false |
[luiActions] | Actions, sets luiPaddingless to true and luiBorderless to false | Array<TemplateRef<void>> | - |
More examples
Header extra
Card title
Header extra left
Card title
Header subtitle
Card titleCard subtitle
Basic with footer
Card title
Footer actions
Card title
Paddingless
Card title
Borderless
Card title
Product
Header w/ avatar and extra
John DoeSoftware Engineer
Header w/ avatar and dropdown
John DoeJuly 5 at 11:43 AM
Description with extra
Available jobsLorem ipsum dolor sit amet.