Botyglot Components V0.0.1

Previews

No matching results.

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
35
<div class="w-full">
  <div class="elevate-page-container">
    <div class="elevate-page-container--header">
      <h3 class="elevate-page-container--header--title">      New Page Container Component
      </h3>
      <div class="elevate-page-container--header--action-bar">
        <button type="button" class="elevate-button elevate-button--primary elevate-button--size-xl elevate-button--align-center">
          New Page Container
        </button>
      </div>
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae diam ac erat scelerisque accumsan.
      Aliquam egestas mauris sit amet ultrices luctus. Praesent massa urna, pulvinar ac ipsum sed, hendrerit tempor
      augue. Vivamus consequat pulvinar ligula, non venenatis libero semper eu. Nunc blandit, quam eget imperdiet
      fringilla, risus turpis gravida arcu, sed gravida nisi ante ut tellus. Phasellus posuere tellus lacus, at
      convallis sapien consequat eu. Vestibulum porttitor sapien vitae purus auctor, nec varius eros dapibus. Nulla
      ornare nunc et augue semper dapibus.
      Nulla nec iaculis sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque vitae efficitur
      nulla.
    </p>
    <div class="elevate-page-container--footer">
      <div class="elevate-page-container--footer--container">
        <div class="elevate-page-container--footer--left-section">
          42 results find
        </div>
        <div class="elevate-page-container--footer-right-section">
          <button type="button" class="elevate-button elevate-button--link elevate-button--size-xl elevate-button--align-center">
            Show more
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
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
<div class="w-full">
  <%= elevate_page_container do |component| %>
    <% component.with_title do %>
      New Page Container Component
    <% end %>
    <% component.with_action_bar do %>
      <%= render(Elevate::ButtonComponent.new(size: :extra_large, scheme: :primary)) { 'New Page Container' } %>
    <% end %>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae diam ac erat scelerisque accumsan.
      Aliquam egestas mauris sit amet ultrices luctus. Praesent massa urna, pulvinar ac ipsum sed, hendrerit tempor
      augue. Vivamus consequat pulvinar ligula, non venenatis libero semper eu. Nunc blandit, quam eget imperdiet
      fringilla, risus turpis gravida arcu, sed gravida nisi ante ut tellus. Phasellus posuere tellus lacus, at
      convallis sapien consequat eu. Vestibulum porttitor sapien vitae purus auctor, nec varius eros dapibus. Nulla
      ornare nunc et augue semper dapibus.
      Nulla nec iaculis sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque vitae efficitur
      nulla.
    </p>
    <% component.with_left_footer do %>
      42 results find
    <% end %>
    <% component.with_right_footer do %>
      <%= elevate_button(size: :extra_large, scheme: :link) { 'Show more' } %>
    <% end %>
  <% end %>
</div>

No notes provided.

No params configured.

app/assets/stylesheets/components/page_container.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
@layer components {
  .elevate-page-container {
    @apply overflow-hidden bg-white shadow sm:rounded-lg mt-10 px-4 pb-4 sm:px-6;
  }
  /* header */
  .elevate-page-container--header {
    @apply pb-2 flex items-center justify-between;
  }
  .elevate-page-container--header--title {
    @apply text-base font-semibold leading-7 text-gray-900;
  }
  .elevate-page-container--header--action-bar {
    @apply flex flex-shrink-0 items-center justify-end px-4 py-4;
  }
  /* footer */
  .elevate-page-container--footer {
    @apply flex items-center justify-between bg-white mt-14;
  }
  .elevate-page-container--footer--container {
    @apply hidden sm:flex sm:flex-1 sm:items-center sm:justify-between w-full;
  }
  .elevate-page-container--footer--left-section {
    @apply text-sm text-gray-700;
  }
  .elevate-page-container--footer--right-section {
    @apply text-sm text-gray-700;
  }
}