Vitrail
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- With Title -->
<div class="border border-slate-200 rounded px-4 py-2 bg-white shadow-sm" >
  <header>
    <div class="flex justify-between items-center mb-2">
      <h3 class="truncate text-sm font-medium text-slate-500">
        Title example
      </h3>
      <i class="fa-light text-slate-600 ml-2 fa-" aria-hidden="true"></i>
    </header>
    Card with title
  </div>
<!-- With Icon -->
<div class="border border-slate-200 rounded px-4 py-2 bg-white shadow-sm" >
  <header>
    <div class="flex justify-between items-center mb-2">
      <h3 class="truncate text-sm font-medium text-slate-500">
      </h3>
      <i class="fa-light text-slate-600 ml-2 fa-user" aria-hidden="true"></i>
    </header>
    Card with icon
  </div>
<!-- With Title And Icon -->
<div class="border border-slate-200 rounded px-4 py-2 bg-white shadow-sm" >
  <header>
    <div class="flex justify-between items-center mb-2">
      <h3 class="truncate text-sm font-medium text-slate-500">
        Title example
      </h3>
      <i class="fa-light text-slate-600 ml-2 fa-user" aria-hidden="true"></i>
    </header>
    Card with title and icon
  </div>
# With Icon

Require font-awesome

# With Title And Icon

Require font-awesome

1
2
3
4
5
6
7
8
# With Title
render Vitrail::Card.new(title: "Title example").with_content("Card with title")
# With Icon
render Vitrail::Card.new(icon: "user").with_content("Card with icon")
# With Title And Icon
render Vitrail::Card.new(title: "Title example", icon: "user").with_content("Card with title and icon")