Botyglot Components V0.0.1

Previews

No matching results.

x
1
<a href="/" class="elevate-link--scheme--primary">Elevate Link</a>
1
render(Elevate::LinkComponent.new(scheme:, url:, muted:, underline:, external:)) { title }

No notes provided.

app/assets/stylesheets/components/link.css

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
35
36
@layer components {
  /* Schemes */
  .elevate-link--scheme--primary {
    @apply text-sm font-semibold leading-6 text-indigo-400 underline;
  }
  .elevate-link--scheme--secondary {
    @apply text-sm font-semibold leading-6 text-gray-900 underline;
  }
  .elevate-link--scheme--btn-secondary {
    @apply bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 shadow-sm rounded-md;
  }
  .elevate-link--scheme--btn-primary {
    @apply bg-indigo-600 text-white hover:bg-indigo-500 shadow-sm;
  }
  .elevate-link--scheme--btn-danger {
    @apply bg-red-500 text-white shadow-sm hover:bg-red-400;
  }
  .elevate-link--scheme--link {
    @apply bg-white hover:bg-gray-100 text-gray-900;
  }
  /* Muted */
  .elevate-link--muted {
    @apply text-gray-500;
  }
  /* No underline */
  .elevate-link--no-underline {
    @apply no-underline;
  }
}