hansui

Appearance

Card ​

A flexible container for grouping and displaying related content or media elements.

Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem fuga repellendus velit quasi facilis tempora id ab beatae, in a est placeat alias...

Features ​

  • Full keyboard navigation
  • Can expand one or multiple items

Anatomy ​

  • Root: The root container for the card
  • CardImage: The individual button within the button-group
  • CardBody
    • CardTitle
    • CardContent
    • CardFooter
      • CardActions
        • CardAction

Usage ​

To create a card, you can use the New function as shown in the example at the top of this page, or alternatively, you can follow the Builder or Functional patterns. Be sure to follow the anatomy defined above.

New function

templ
@card.New(props ...*Props)
  • props - A pointer to the card.Props struct that defines the configuration options for the card (see here).
templ
import "github.com/indaco/hansui/components/card"

@card.New() {
    @card.CardBody() {
        @card.CardTitle("Card Title")
        @card.CardContent() {
            <p>Lorem ipsum dolor sit amet consectetur...</p>
        }
    }
}
Builder pattern

The Builder pattern creates an instance using method chaining. The With methods, such as WithColor or WithBorderStyle, are chainable configuration functions that allow you to customize various properties of the component:

templ
@card.Builder().WithResponsive(true).Render() {
    @card.CardImage("https://picsum.photos/seed/picsum/200/200", "Dummy Image")
    @card.CardBody() {
        @card.CardTitle("Card Title")
        @card.CardContent() {
            <p>Lorem ipsum dolor sit amet consectetur...</p>
        }
    }
}
Functional pattern

The Functional pattern applies configurations through individual function calls before rendering the button. Like in the Builder pattern, With methods customize the component by setting specific properties:

templ
@card.Render(card.WithResponsive(true)) {
    @card.CardImage("https://picsum.photos/seed/picsum/200/200", "Dummy Image")
    @card.CardBody() {
        @card.CardTitle("Card Title")
        @card.CardContent() {
            <p>Lorem ipsum dolor sit amet consectetur...</p>
        }
    }
}

API Reference ​

card.Props ​

Below is a list of each struct field, along with its type, default value, and allowed values where applicable.

Variant ​

Specifies the style variant of the card.

  • type: string
  • values: outline, light, lifted, stacked, cyberpunk, brutalist, retro

Responsive ​

If true, the card will adjust its layout based on the screen size for a more responsive design.

  • type: bool
  • default: false

HoverEffects ​

Defines the hover effects applied to the card.

  • type: card.HoverEffects

Shadow

If true, a shadow effect will be applied when the card is hovered.

Translate

If true, a translate effect will be applied when the card is hovered.

Attrs ​

Additional HTML attributes for the accordion element. Allows you to set custom attributes such as data attributes, ARIA roles or others.

  • type: templ.Attributes

Actions ​

Placement ​

Specifies the placement of the actions relative to the card content (e.g., top, bottom, left, right).

  • type: string
  • type: start
  • type: start, end

Shape ​

Defines the shape of the actions' buttons or links.

  • type: string
  • default: rounded
  • type: box, rounded

Items ​

An array of actions that are available in the card.

  • type: []card.Action

Action ​

Label ​

The text label for the action button or link.

  • type: string

Href ​

The URL for the action if rendered as a link.

  • type: string

Attrs ​

Additional HTML attributes for the button. Allows you to set custom attributes such as data attributes, ARIA roles or others.

  • type: templ.Attributes