Components

On This Page

Card Component

Displays a card with image, title and content.

Card with vertical orientation

Card Header

Card description or card content.

Expand/Collapse source code
Copied
Copy source sections
Copy source as is
SSR/CSR
Can be used both on the server and on the client side.
Imports
import live-web.dom
import live-web-view.content
import live-web-view.button
Styles
static any[] use = [Card]
Content
Card{ orientation: Card.Vertical
    Figure{
        Img{ 
            src: 'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%201200%22%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22600%22%20r%3D%22500%22%20fill%3D%22%23999%22%20fill-opacity%3D%22.4%22/%3E%3C/svg%3E' 
        }
    }
    Section{ 
        Header{
            H2{ T`Card Header` }
        }
        P{
            T`Card description or card content.`
        }
        P{
            PrimaryButton{ T`View Details` }
        }
    }
}

Card with horizontal orientation

Card Header

Card description or card content.

Expand/Collapse source code
Copied
Copy source sections
Copy source as is
SSR/CSR
Can be used both on the server and on the client side.
Imports
import live-web.dom
import live-web-view.content
import live-web-view.button
Styles
static any[] use = [Card]
Content
Card{ orientation: Card.Vertical
    Figure{
        Img{ 
            src: 'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%201200%22%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22600%22%20r%3D%22500%22%20fill%3D%22%23999%22%20fill-opacity%3D%22.4%22/%3E%3C/svg%3E' 
        }
    }
    Section{ 
        Header{
            H2{ T`Card Header` }
        }
        P{
            T`Card description or card content.`
        }
        P{
            PrimaryButton{ T`View Details` }
        }
    }
}

Card Grid

Card Header

Card description or card content.

Card Header

Card description or card content.

Card Header

Card description or card content.

Card Header

Card description or card content.

Card Header

Card description or card content.

Card Header

Card description or card content.

Expand/Collapse source code
Copied
Copy source sections
Copy source as is
SSR/CSR
Can be used both on the server and on the client side.
Imports
import live-web.dom
import live-web-view.content
import live-web-view.button
Styles
static any[] use = [Card]
Content
CardGrid{
    children: [1, 2, 3, 4, 5, 6].map(card => 
        Card{ orientation: Card.Vertical
            Figure{
                Img{ 
                    src: 'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%201200%22%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22600%22%20r%3D%22500%22%20fill%3D%22%23999%22%20fill-opacity%3D%22.4%22/%3E%3C/svg%3E' 
                }
            }
            Section{ 
                Header{
                    H2{ T`Card Header` }
                }
                P{
                    T`Card description or card content.`
                }
                P{
                    PrimaryButton{ T`View Details` }
                }
            }
        })
}