Card

1
Card :base_100, class: "w-96 shadow-xl" do |card|
2
  figure do
3
    img(src:, alt: "Shoes")
4
  end
5
6
  card.body do
7
    card.title do
8
      "Shoes!"
9
    end
10
11
    p do
12
      "If a dog chews shoes whose shoes does he choose?"
13
    end
14
15
    card.actions class: "justify-end" do
16
      Button :primary do
17
        "Buy Now"
18
      end
19
    end
20
  end
21
end

1
Card :compact, :base_100, class: "w-96 shadow-xl" do |card|
2
  figure do
3
    img(src:, alt: "Shoes")
4
  end
5
6
  card.body do
7
    card.title do
8
      "Shoes!"
9
    end
10
11
    p do
12
      "If a dog chews shoes whose shoes does he choose?"
13
    end
14
15
    card.actions class: "justify-end" do
16
      Button :primary do
17
        "Buy Now"
18
      end
19
    end
20
  end
21
end

1
Card :base_100, class: "w-96 shadow-xl" do |card|
2
  figure do
3
    img(src:, alt: "Shoes")
4
  end
5
6
  card.body do
7
    card.title do
8
      plain "Shoes!"
9
      Badge :secondary do
10
        "NEW"
11
      end
12
    end
13
14
    p do
15
      "If a dog chews shoes whose shoes does he choose?"
16
    end
17
18
    card.actions class: "justify-end" do
19
      Badge :outline do
20
        "Fashion"
21
      end
22
      Badge :outline do
23
        "Products"
24
      end
25
    end
26
  end
27
end

1
Card :base_100, class: "w-96 shadow-xl" do |card|
2
  card.body do
3
    card.title do
4
      "Shoes!"
5
    end
6
7
    p do
8
      "If a dog chews shoes whose shoes does he choose?"
9
    end
10
  end
11
12
  figure do
13
    img(src:, alt: "Shoes")
14
  end
15
end

1
Card :base_100, class: "w-96 shadow-xl" do |card|
2
  figure class: "px-10 pt-10" do
3
    img(src:, alt: "Shoes", class: "rounded-xl")
4
  end
5
6
  card.body class: "items-center text-center" do
7
    card.title do
8
      "Shoes!"
9
    end
10
11
    p do
12
      "If a dog chews shoes whose shoes does he choose?"
13
    end
14
15
    card.actions do
16
      Button :primary do
17
        "Buy Now"
18
      end
19
    end
20
  end
21
end

1
Card :image_full, :base_100, class: "w-96 shadow-xl" do |card|
2
  card.body do
3
    card.title do
4
      "Shoes!"
5
    end
6
7
    p do
8
      "If a dog chews shoes whose shoes does he choose?"
9
    end
10
  end
11
12
  figure do
13
    img(
14
      src:,
15
      alt: "Shoes"
16
    )
17
  end
18
end

1
Card :base_100, class: "w-96 shadow-xl" do |card|
2
  card.body do
3
    card.title do
4
      "Shoes!"
5
    end
6
7
    p do
8
      "If a dog chews shoes whose shoes does he choose?"
9
    end
10
11
    card.actions class: "justify-end" do
12
      Button :primary do
13
        "Buy Now"
14
      end
15
    end
16
  end
17
end

1
Card :primary, class: "w-96" do |card|
2
  card.body do
3
    card.title do
4
      "Card title!"
5
    end
6
7
    p do
8
      "If a dog chews shoes whose shoes does he choose?"
9
    end
10
11
    card.actions class: "justify-end" do
12
      Button :primary do
13
        "Buy Now"
14
      end
15
    end
16
  end
17
end

1
Card :neutral, class: "w-96" do |card|
2
  card.body class: "items-center text-center" do
3
    card.title do
4
      "Cookies!"
5
    end
6
7
    p do
8
      "We are using cookies for no reason."
9
    end
10
11
    card.actions class: "justify-end" do
12
      Button :primary do
13
        "Accept"
14
      end
15
16
      Button :ghost do
17
        "Deny"
18
      end
19
    end
20
  end
21
end

1
Card :base_100, class: "w-96 shadow-xl" do |card|
2
  card.body do
3
    card.actions class: "justify-end" do
4
      Button :sm, :square do
5
        x_icon_svg
6
      end
7
    end
8
9
    p do
10
      "We are using cookies for no reason."
11
    end
12
  end
13
end

1
Card :glass, class: "w-96" do |card|
2
  figure do
3
    img(src:, alt: "car!")
4
  end
5
6
  card.body do
7
    card.title do
8
      "Life hack"
9
    end
10
11
    p do
12
      "How to park your car at your garage?"
13
    end
14
15
    card.actions class: "justify-end" do
16
      Button :primary do
17
        "Learn now!"
18
      end
19
    end
20
  end
21
end

1
Card :side, :base_100, class: "shadow-xl" do |card|
2
  figure do
3
    img(src:, alt: "Movie")
4
  end
5
6
  card.body do
7
    card.title do
8
      "New movie is released!"
9
    end
10
11
    p do
12
      "Click the button to watch on Jetflix app."
13
    end
14
15
    card.actions class: "justify-end" do
16
      Button :primary do
17
        "Watch"
18
      end
19
    end
20
  end
21
end

1
Card :base_100, responsive: {lg: :side}, class: "shadow-xl" do |card|
2
  figure do
3
    img(src:, alt: "Album")
4
  end
5
6
  card.body do
7
    card.title do
8
      "New album is released!"
9
    end
10
11
    p do
12
      "Click the button to listen on Spotiwhy app."
13
    end
14
15
    card.actions class: "justify-end" do
16
      Button :primary do
17
        "Listen"
18
      end
19
    end
20
  end
21
end