1. Domino UI
  2. Components
  3. Cards
Top No header Headers Colored Collapsible With logo Sub-header Docs

Cards

Card

A container component to host other components and elements that provide some extended features like, collapsible body, feature rich header that comes with logo area, title, description and actions toolbar and more.

See also :

Anatomy

alerts-anatomy.
  1. Card header, Optional and can also be positioned at the bottom of the card.
  2. Card body, the card main content container.
  3. Card title, Optional.
  4. Card description, Optional.
  5. Card header postfix elements, Optional, collapsible cards will have a collapse postfix action by default.
  6. Card prefix elements, Optional, Will be positioned before the title.
  7. Card logo, Optional will be placed before the header prefix elements.
  8. Card sub-header, Optional, Will show below the header if the header at the top or at the top of the header if the header at the bottom.

Examples

Cards without header Cards without header can work as a general purpose containers

Cars with headers Cards with headers can provide more context and actions for the card content

Colored cards The card header and body colors are both customizable

Collapsible cards Cards allow the expand and collapse of the card body.

Cards with sub-header Cards can have an extra sub-header to provide more context.

Learn more

API Docs: Card

Browse full javadocs

Constructors

public void Card()
Creates an empty Card without a header.
public void Card(String title)
Creates a card with title in the header

title

The card title text

public void Card(Node title)
Creates a card with title in the header

title

The card title text

public void Card(String title, String description)
Creates a card with the title in the header and a description below the title

title

The card title text

description

The card description text

public void Card(Node title, String description)
Creates a card with the title in the header and a description below the title

title

The card title text

description

The card description text

Static methods

public static Card create()
factory method to create an empty card without a header

Returns:

a Card object

public static Card create(String title)
Factory method to create a card with a title in the header

title

The card title text.



Returns:

new Card instance

public static Card create(Node title)
Factory method to create a card with a title in the header

title

The card title text.



Returns:

new Card instance

public static Card create(String title, String description)
Factory method to create a card with a title in the header and a description below the title

title

The card title text

description

The card description text



Returns:

new Card instance

public static Card create(Node title, String description)
Factory method to create a card with a title in the header and a description below the title

title

The card title text

description

The card description text



Returns:

new Card instance

API Docs: CardHeader

Browse full javadocs

Constructors

public void CardHeader(String title)
Creates a CardHeader with a title.

title

The card header title text

public void CardHeader(String title, String description)
Creates a CardHeader with a title and description.

title

The card header title text

description

The card header description text

Static methods

public static CardHeader create()
Factory method to create empty CardHeader.

Returns:

new CardHeader instance

Public methods

public DivElement getMainHeader()
This will initialize the CardHeader main container if not yet initialized.

Returns:

The DivElement representing the CardHeader main container.

public CardHeader withMainHeader()
This will initialize the CardHeader main container if not yet initialized.

Returns:

same CardHeader instance

public CardHeader withMainHeader(ChildHandler<CardHeader, DivElement> handler)
Use to apply customization on the CardHeader main container element without breaking the fluent API chain. This will initialize and append the card header if not yet initialized.

handler

The ChildHandler applying the customizations.



Returns:

same CardHeader instance

public DivElement getSubHeader()
This will initialize the CardHeader sub-header container if not yet initialized.

Returns:

The DivElement representing the Card sub-header container

public CardHeader withSubHeader()
This will initialize the CardHeader sub-header container if not yet initialized.

Returns:

same CardHeader instance

public CardHeader withSubHeader(ChildHandler<CardHeader, DivElement> handler)
Use to apply customization on the Card sub-header container element without breaking the fluent API chain. This will initialize and append the card header if not yet initialized.

handler

The ChildHandler applying the customizations.



Returns:

same CardHeader instance

public CardHeader setTitle(String title)
Sets the CardHeader title, this will initialize and append the main header container if not yet initialized.

title

The CardHeader title text



Returns:

same CardHeader instance

public CardHeader setTitle(Node title)
Sets the CardHeader title, this will initialize and append the main header container if not yet initialized.

title

The CardHeader title text



Returns:

same CardHeader instance

public CardHeader setDescription(String text)
Sets the CardHeader description, this will initialize and append the description container if not yet initialized.

text

The CardHeader description text



Returns:

same CardHeader instance

public DivElement getTitleElement()
this will initialize and append the CardHeader title container if not yet initialized. getTitleElement.

Returns:

The DivElement of the CardHeader title.

public CardHeader withTitle()
This will initialize and append the CardHeader title container if not yet initialized.

Returns:

same CardHeader instance

public CardHeader withTitle(ChildHandler<CardHeader, DivElement> handler)
Use to apply customization on the CardHeader title element without breaking the fluent API chain. This will initialize and append the card title element if not yet initialized.

handler

The ChildHandler applying the customizations.



Returns:

same CardHeader instance

public HeadingElement getMainTitleElement()
This will initialize and append the CardHeader main title container if not yet initialized.

Returns:

The HeadingElement of the CardHeader main title

public CardHeader withMainTitle()
This will initialize and append the CardHeader main title container if not yet initialized.

Returns:

same CardHeader instance

public CardHeader withMainTitle(String title)
Sets the CardHeader main title. This will initialize and append the card header main title element if not yet initialized.

title

The card main title text



Returns:

same CardHeader instance

public CardHeader withMainTitle(ChildHandler<CardHeader, HeadingElement> handler)
Use to apply customization on the CardHeader main title element without breaking the fluent API chain. This will initialize and append the card header if not yet initialized.

handler

The ChildHandler applying the customizations.



Returns:

same CardHeader instance

public SmallElement getDescriptionElement()
This will initialize and append the card header description element if not yet initialized.

Returns:

The SmallElement of the CardHeader description

public CardHeader withDescription()
This will initialize and append the card header description element if not yet initialized.

Returns:

same CardHeader instance

public CardHeader withDescription(String description)
Sets the CardHeader description. This will initialize and append the card header description element if not yet initialized.

description

The CardHeader description text



Returns:

same CardHeader instance

public CardHeader withDescription(ChildHandler<CardHeader, SmallElement> handler)
Use to apply customization on the CardHeader description element without breaking the fluent API chain. This will initialize and append the card header description element if not yet initialized.

handler

The ChildHandler applying the customizations.



Returns:

same CardHeader instance

public CardHeader setLogo(HTMLImageElement img)
Sets the CardHeader logo This will initialize and append the card header logo element if not yet initialized.

img

The HTMLImageElement to be used as CardHeader logo.



Returns:

same CardHeader instance

public CardHeader setLogo(ImageElement img)
Sets the CardHeader logo This will initialize and append the card header logo element if not yet initialized.

img

The ImageElement to be used as CardHeader logo.



Returns:

same CardHeader instance

public ImageElement getLogo()
This will initialize and append the card header logo element if not yet initialized.

Returns:

The ImageElement of the CardHeader logo

public CardHeader withLogo(HTMLImageElement img)
Sets the CardHeader logo This will initialize and append the card header logo element if not yet initialized.

img

The HTMLImageElement to be used as CardHeader logo.



Returns:

same CardHeader instance

public CardHeader withLogo()
This will initialize and append the card header logo element if not yet initialized.

Returns:

same CardHeader instance

public CardHeader withLogo(ChildHandler<CardHeader, ImageElement> handler)
Use to apply customization on the CardHeader logo element without breaking the fluent API chain. This will initialize and append the card header logo element if not yet initialized.

handler

The ChildHandler applying the customizations.



Returns:

same CardHeader instance

public CardHeader setIcon(Icon<?> icon)
Sets the CardHeader icon, CardHeader icon fits between the logo and the title. This will initialize and append the card header icon if not yet initialized.

icon

a Icon to be used as card logo.



Returns:

same Card instance

public Icon<?> getIcon()
This will initialize and append the card header icon if not yet initialized.

Returns:

The Icon of this CardHeader instance

public CardHeader withIcon(Icon<?> icon)
Sets the card header icon, card header icon fits between the logo and the title. This will initialize and append the card header icon if not yet initialized.

icon

a Icon to be used as card header icon.



Returns:

same CardHeader instance

public CardHeader withIcon()
This will initialize and append the card header icon if not yet initialized.

Returns:

same CardHeader instance

public CardHeader withIcon(ChildHandler<CardHeader, Icon<?>> handler)
Use to apply customization on the CardHeader icon element without breaking the fluent API chain. This will initialize and append the card header icon element if not yet initialized.

handler

The ChildHandler applying the customizations.



Returns:

same Card instance

public CardHeader appendChild(PostfixAddOn<?> postfixAddOn)
Appends an element to the right side of the card header.

postfixAddOn

A PostfixAddOn wrapped element



Returns:

same CardHeader instance

public CardHeader appendChild(PrefixAddOn<?> prefixAddOn)
Appends an element to the left side of the card header, between the logo and the title.

prefixAddOn

A PrefixAddOn wrapped element



Returns:

same card instance

We are a group of passionate people who love what we do

Donate & Support Us