UI Components – Artemis Library

<div class="px-5 py-6" x-data="{ modal: true }" :class="{ 'is-hidden': !modal }">
  <div class="notification" style="background:transparent;">
    <h3 class="mb-2 is-size-5 has-text-weight-bold has-text-primary">Example for Banner</h3>
    <p class="is-size-6 has-text-primary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
    <button class="delete is-small" x-on:click="modal = false"></button>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Bulma Component #542

<div class="px-5 py-6" x-data="{ modal: true }" :class="{ 'is-hidden': !modal }">
  <div class="notification" style="background:transparent;">
    <div class="is-flex">
      <div class="mr-2">
        <span class="has-text-success is-inline-block">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM10 15C9.4 15 9 14.6 9 14C9 13.4 9.4 13 10 13C10.6 13 11 13.4 11 14C11 14.6 10.6 15 10 15ZM11 10C11 10.6 10.6 11 10 11C9.4 11 9 10.6 9 10V6C9 5.4 9.4 5 10 5C10.6 5 11 5.4 11 6V10Z" fill="currentColor"></path>
          </svg>
        </span>
      </div>
      <div>
        <h3 class="mb-2 is-size-5 has-text-weight-bold has-text-success">Example for Banner</h3>
        <p class="is-size-6 has-text-success">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
      </div>
    </div>
    <button class="delete is-small" x-on:click="modal = false"></button>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Bulma Component #543

<section class="section">
  <div class="container">
    <div class="mb-5 columns is-multiline is-vcenetred">
      <div class="column">
        <h4 class="title is-size-4 mb-0">Files from Project Example</h4>
      </div>
      <div class="column">
        <div class="is-flex is-justify-content-flex-end is-align-items-center">
          <div class="field has-addons ml-auto mr-3 mb-0">
            <div class="control">
              <input class="input has-background-white has-text-dark" type="text" placeholder="Type to search...">
            </div>
            <div class="control">
              <button class="button is-outlined has-background-white" style="border-color: #A4AFBB;" type="button">
                <svg width="18" height="18" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.0921 16.9083L15.0004 13.8417C16.2005 12.3453 16.7817 10.4461 16.6244 8.53441C16.4672 6.62274 15.5835 4.84398 14.155 3.56386C12.7265 2.28375 10.8619 1.59958 8.94451 1.65205C7.02711 1.70452 5.20268 2.48963 3.84636 3.84594C2.49004 5.20226 1.70493 7.02669 1.65247 8.94409C1.6 10.8615 2.28416 12.7261 3.56428 14.1546C4.84439 15.583 6.62316 16.4668 8.53482 16.624C10.4465 16.7812 12.3457 16.2001 13.8421 15L16.9087 18.0667C16.9862 18.1448 17.0784 18.2068 17.1799 18.2491C17.2815 18.2914 17.3904 18.3132 17.5004 18.3132C17.6104 18.3132 17.7193 18.2914 17.8209 18.2491C17.9224 18.2068 18.0146 18.1448 18.0921 18.0667C18.2423 17.9113 18.3262 17.7036 18.3262 17.4875C18.3262 17.2714 18.2423 17.0637 18.0921 16.9083ZM9.16708 15C8.01335 15 6.88554 14.6579 5.92625 14.0169C4.96696 13.3759 4.21929 12.4649 3.77778 11.399C3.33627 10.3331 3.22075 9.16019 3.44583 8.02863C3.67091 6.89708 4.22648 5.85767 5.04229 5.04187C5.85809 4.22606 6.89749 3.67049 8.02905 3.44541C9.1606 3.22033 10.3335 3.33585 11.3994 3.77736C12.4653 4.21887 13.3763 4.96654 14.0173 5.92583C14.6583 6.88512 15.0004 8.01293 15.0004 9.16666C15.0004 10.7138 14.3858 12.1975 13.2919 13.2914C12.1979 14.3854 10.7142 15 9.16708 15Z" fill="#382CDD"></path>
                </svg>
              </button>
            </div>
          </div>
          <div class="is-flex is-align-items-center">
            <a class="button is-primary mr-3 is-inline-flex is-align-items-center" href="#">
              <span class="mr-2">
                <svg width="16" height="18" viewbox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Bulma Component #544

<div class="px-5 py-6" x-data="{ modal: true }" :class="{ 'is-hidden': !modal }">
  <div class="notification" style="background:transparent;">
    <div class="is-flex">
      <div class="mr-2">
        <span class="has-text-primary is-inline-block">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM10 15C9.4 15 9 14.6 9 14C9 13.4 9.4 13 10 13C10.6 13 11 13.4 11 14C11 14.6 10.6 15 10 15ZM11 10C11 10.6 10.6 11 10 11C9.4 11 9 10.6 9 10V6C9 5.4 9.4 5 10 5C10.6 5 11 5.4 11 6V10Z" fill="currentColor"></path>
          </svg>
        </span>
      </div>
      <div>
        <h3 class="mb-2 is-size-5 has-text-weight-bold has-text-primary">Example for Banner</h3>
        <p class="is-size-6 has-text-primary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
      </div>
    </div>
    <button class="delete is-small" x-on:click="modal = false"></button>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Bulma Component #545

<div class="px-5 py-6" x-data="{ modal: true }" :class="{ 'is-hidden': !modal }">
  <div class="notification" style="background:transparent;">
    <div class="is-flex">
      <div class="mr-2">
        <span class="has-text-dark is-inline-block">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM10 15C9.4 15 9 14.6 9 14C9 13.4 9.4 13 10 13C10.6 13 11 13.4 11 14C11 14.6 10.6 15 10 15ZM11 10C11 10.6 10.6 11 10 11C9.4 11 9 10.6 9 10V6C9 5.4 9.4 5 10 5C10.6 5 11 5.4 11 6V10Z" fill="currentColor"></path>
          </svg>
        </span>
      </div>
      <div>
        <h3 class="mb-2 is-size-5 has-text-weight-bold has-text-dark">Example for Banner</h3>
        <p class="is-size-6 has-text-dark">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
      </div>
    </div>
    <button class="delete is-small" x-on:click="modal = false"></button>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Bulma Component #546

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6-desktop">
        <div class="box px-0 pb-0">
          <div class="px-5 pb-5" x-data="{ activeSlide: 1 }">
            <div class="is-flex mb-5 is-justify-content-space-between is-align-items-center">
              <div class="is-size-7 has-text-grey">Important information</div>
              <div class="is-flex is-align-items-center">
                <button x-on:click="activeSlide = 1" class="button p-0 mr-3" :class="{ 'has-background-grey-light': activeSlide != 1, 'has-background-primary': activeSlide == 1 }" style="width: 8px; height: 8px; border-radius: 50% !important;"></button>
                <button x-on:click="activeSlide = 2" class="button p-0 mr-3" :class="{ 'has-background-grey-light': activeSlide != 2, 'has-background-primary': activeSlide == 2 }" style="width: 8px; height: 8px; border-radius: 50% !important;"></button>
                <button x-on:click="activeSlide = 3" class="button p-0 mr-3" :class="{ 'has-background-grey-light': activeSlide != 3, 'has-background-primary': activeSlide == 3 }" style="width: 8px; height: 8px; border-radius: 50% !important;"></button>
                <button x-on:click="activeSlide = 4" class="button p-0 is-rounded" :class="{ 'has-background-grey-light': activeSlide != 4, 'has-background-primary': activeSlide == 4 }" style="width: 8px; height: 8px; border-radius: 50% !important;"></button>
              </div>
            </div>
            <div class="is-clipped">
                <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%); white-space: nowrap; transition: transform 0.5s ease-in-out;'" class="mb-8">
                    <div class="is-inline-block" style="width: 100%; white-space: normal;">
                        <h3 class="title is-size-4 has-text-dark">Event for your team members</h3>
                        <p class="subtitle is-size-6">You have been invited to join this event. It is only for team members.</p>
                    </div>
                    <div class="is-inline-block" style="width: 100%; white-space: normal;">
                        <h3 class="title is-size-4 has-text-dark">Exclusive Team Building Experience</h3>
                        <p class="subtitle is-size-6">An Invitation Reserved for Our Valued Team Members</p>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Bulma Component #547

<div class="px-5 py-6" x-data="{ modal: true }" :class="{ 'is-hidden': !modal }">
  <div class="notification" style="background:transparent;">
    <div class="is-flex">
      <div class="mr-2">
        <span class="has-text-warning is-inline-block">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM10 15C9.4 15 9 14.6 9 14C9 13.4 9.4 13 10 13C10.6 13 11 13.4 11 14C11 14.6 10.6 15 10 15ZM11 10C11 10.6 10.6 11 10 11C9.4 11 9 10.6 9 10V6C9 5.4 9.4 5 10 5C10.6 5 11 5.4 11 6V10Z" fill="currentColor"></path>
          </svg>
        </span>
      </div>
      <div>
        <h3 class="mb-2 is-size-5 has-text-weight-bold has-text-warning">Example for Banner</h3>
        <p class="is-size-6 has-text-warning">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
      </div>
    </div>
    <button class="delete is-small" x-on:click="modal = false"></button>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Bulma Component #548

<section class="mb-0">
  <nav class="navbar has-background-white is-relative">
    <div class="navbar-brand is-align-items-center">
      <div class="navbar-item">
        <button class="button p-0 is-white is-flex is-align-items-center has-text-weight-normal">
          <span class="has-text-white mr-3 is-flex has-background-primary is-justify-content-center is-align-items-center is-rounded is-size-6" style="width: 40px; height: 40px; border-radius: 50% !important;">EP</span>
          <h6 class="title is-size-6 mb-0 mr-2">Example Project</h6>
          <span class="is-inline-block">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.8596 9.52667L7.99958 12.3933L5.13958 9.52667C5.01404 9.40114 4.84378 9.33061 4.66624 9.33061C4.48871 9.33061 4.31845 9.40114 4.19291 9.52667C4.06738 9.65221 3.99685 9.82247 3.99685 10C3.99685 10.1775 4.06738 10.3478 4.19291 10.4733L7.52624 13.8067C7.65115 13.9308 7.82012 14.0005 7.99624 14.0005C8.17237 14.0005 8.34134 13.9308 8.46624 13.8067L11.7996 10.4733C11.8617 10.4112 11.911 10.3374 11.9447 10.2562C11.9783 10.175 11.9956 10.0879 11.9956 10C11.9956 9.9121 11.9783 9.82505 11.9447 9.74384C11.911 9.66262 11.8617 9.58883 11.7996 9.52667C11.7374 9.46451 11.6636 9.41521 11.5824 9.38157C11.5012 9.34793 11.4142 9.33061 11.3262 9.33061C11.2383 9.33061 11.1513 9.34793 11.0701 9.38157C10.9889 9.41521 10.9151 9.46451 10.8529 9.52667H10.8596ZM5.13958 6.47334L7.99958 3.60667L10.8596 6.47334C10.9845 6.59751 11.1535 6.6672 11.3296 6.6672C11.5057 6.6672 11.6747 6.59751 11.7996 6.47334C11.9237 6.34843 11.9934 6.17946 11.9934 6.00334C11.9934 5.82722 11.9237 5.65825 11.7996 5.53334L8.46624 2.20001C8.40427 2.13752 8.33053 2.08792 8.2493 2.05408C8.16806 2.02023 8.08092 2.00281 7.99291 2.00281C7.9049 2.00281 7.81777 2.02023 7.73653 2.05408C7.65529 2.08792 7.58155 2.13752 7.51958 2.20001L4.18624 5.53334C4.06159 5.65976 3.99227 5.83052 3.99352 6.00805C3.99477 6.18559 4.06649 6.35535 4.19291 6.48001C4.31933 6.60466 4.49009 6.67398 4.66762 6.67273C4.84516 6.67148 5.01493 6.59976 5.13958 6.47334Z" fill="currentColor"></path>
            </svg>
          </span>
        </button>
      </div>
      <button class="button navbar-burger mr-5 is-primary is-inline-flex-touch is-justify-content-center is-align-items-center" style="width: 32px; height: 32px;" type="button">
        <svg class="is-flex-shrink-0" width="18" height="10" viewbox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.50002 1.66667H16.5C16.721 1.66667 16.933 1.57887 17.0893 1.42259C17.2456 1.26631 17.3334 1.05435 17.3334 0.833333C17.3334 0.61232 17.2456 0.400358 17.0893 0.244078C16.933 0.0877975 16.721 0 16.5 0H1.50002C1.27901 0 1.06704 0.0877975 0.910765 0.244078C0.754484 0.400358 0.666687 0.61232 0.666687 0.833333C0.666687 1.05435 0.754484 1.26631 0.910765 1.42259C1.06704 1.57887 1.27901 1.66667 1.50002 1.66667V1.66667ZM16.5 8.33333H1.50002C1.27901 8.33333 1.06704 8.42113 0.910765 8.57741C0.754484 8.73369 0.666687 8.94565 0.666687 9.16667C0.666687 9.38768 0.754484 9.59964 0.910765 9.75592C1.06704 9.9122 1.27901 10 1.50002 10H16.5C16.721 10 16.933 9.9122 17.0893 9.75592C17.2456 9.59964 17.3334 9.38768 17.3334 9.16667C17.3334 8.94565 17.2456 8.73369 17.0893 8.57741C16.933 8.42113 16.721 8.33333 16.5 8.33333ZM16.5 4.16667H1.50002C1.27901 4.16667 1.06704 4.25446 0.910765 4.41074C0.754484 4.56702 0.666687 4.77899 0.666687 5C0.666687 5.22101 0.754484 5.43298 0.910765 5.58926C1.06704 5.74554 1.27901 5.83333 1.50002 5.83333H16.5C16.721 5.83333 16.933 5.74554 17.0893 5.58926C17.2456 5.43298 17.3334 5.22101 17.3334 5C17.3334 4.77899 17.2456 4.56702 17.0893 4.41074C16.933 4.25446 16.721 4.16667 16.5 4.16667Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end">
        <div class="navbar-item pr-3">
          <a class="button is-ghost p-0 mr-5 has-text-grey-light" href="#">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Bulma Component #549

<div class="px-5 py-6" x-data="{ modal: true }" :class="{ 'is-hidden': !modal }">
  <div class="notification" style="background:transparent;">
    <div class="is-flex">
      <div class="mr-2">
        <span class="has-text-danger is-inline-block">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM10 15C9.4 15 9 14.6 9 14C9 13.4 9.4 13 10 13C10.6 13 11 13.4 11 14C11 14.6 10.6 15 10 15ZM11 10C11 10.6 10.6 11 10 11C9.4 11 9 10.6 9 10V6C9 5.4 9.4 5 10 5C10.6 5 11 5.4 11 6V10Z" fill="currentColor"></path>
          </svg>
        </span>
      </div>
      <div>
        <h3 class="mb-2 is-size-5 has-text-weight-bold has-text-danger">Example for Banner</h3>
        <p class="is-size-6 has-text-danger">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
      </div>
    </div>
    <button class="delete is-small" x-on:click="modal = false"></button>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Bulma Component #550

<section class="section">
  <div class="container">
    <div class="box px-0">
      <div class="px-5 pb-4 is-flex is-justify-content-space-between is-align-items-center" style="border-bottom: 1px solid #E1E4E8;">
        <h5 class="title is-size-4 mb-0">Task overview</h5>
        <div class="select is-small is-white">
          <select class="has-text-white has-background-primary" name="name" aria-label="select example">
            <option value="1">Change</option>
            <option value="2">Sort</option>
            <option value="3">Add</option>
          </select>
        </div>
      </div>
      <div class="px-5 pt-4">
        <div class="mb-3 is-flex is-justify-content-space-between">
          <h4 class="is-size-7 has-text-grey has-text-weight-medium">Task Name</h4>
          <h4 class="is-size-7 has-text-grey has-text-weight-medium">Action</h4>
        </div>
        <div class="is-flex p-3 is-align-items-center has-background-primary-light is-rounded">
          <span class="mr-3 is-inline-flex is-justify-content-center is-align-items-center has-text-warning has-background-warning-light is-rounded" style="width: 32px; height: 32px;">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.0675 1.37468C15.0374 1.26049 14.9775 1.15633 14.894 1.07284C14.8106 0.989341 14.7064 0.929498 14.5922 0.899417C13.2246 0.54421 11.7845 0.582467 10.4377 1.00979C9.09094 1.4371 7.89221 2.2361 6.97958 3.31479L6.23629 4.19734L4.49976 3.77836C4.07759 3.63118 3.61642 3.64173 3.20141 3.80806C2.78641 3.97439 2.44561 4.28526 2.24195 4.68328L0.775154 7.28321C0.72376 7.37428 0.694511 7.47616 0.689772 7.58062C0.685033 7.68509 0.704936 7.7892 0.747874 7.88454C0.790811 7.97989 0.855578 8.0638 0.936941 8.12949C1.0183 8.19518 1.11398 8.2408 1.21623 8.26268L3.26473 8.7018C3.09121 9.23004 2.9673 9.7733 2.89462 10.3245C2.88144 10.4258 2.8917 10.5287 2.92461 10.6254C2.95751 10.7221 3.01218 10.8099 3.08439 10.8821L5.15113 12.9489C5.21301 13.0108 5.28648 13.0599 5.36736 13.0934C5.44823 13.127 5.53492 13.1442 5.62246 13.1442C5.64167 13.1442 5.66087 13.1432 5.68041 13.1416C6.24397 13.0909 6.80068 12.9815 7.34145 12.8149L7.77057 14.8171C7.7925 14.9193 7.83816 15.0149 7.90386 15.0963C7.96956 15.1776 8.05346 15.2423 8.14879 15.2853C8.24413 15.3282 8.34822 15.3481 8.45266 15.3434C8.55711 15.3387 8.65899 15.3095 8.75007 15.2581L11.3536 13.7897C11.72 13.5671 12.0062 13.2338 12.171 12.8379C12.3358 12.4421 12.3705 12.0041 12.2702 11.5872L11.8244 9.7479L12.6492 8.98956C13.7319 8.07949 14.5339 6.8807 14.9621 5.53265C15.3902 4.18459 15.4267 2.74269 15.0675 1.37468ZM2.3816 7.14877L3.41903 5.30893C3.48347 5.18403 3.59325 5.08851 3.72587 5.04196C3.85848 4.99541 4.00388 5.00137 4.13225 5.0586L5.27719 5.33607L4.84385 5.8506C4.43303 6.34298 4.0777 6.87913 3.78431 7.44934L2.3816 7.14877ZM10.6951 12.6302L8.88453 13.6513L8.59819 12.3149C9.17861 12.0255 9.71936 11.6625 10.2071 11.235L10.7028 10.7792L10.9718 11.889C11.0066 12.026 10.9988 12.1704 10.9494 12.3029C10.8999 12.4354 10.8112 12.5496 10.6951 12.6302ZM11.7712 7.98668L9.31487 10.2442C8.34257 11.085 7.14328 11.6195 5.86793 11.7803L4.26506 10.1774C4.48034 8.89876 5.03287 7.70067 5.86565 6.70676L6.98454 5.37831C7.00318 5.35881 7.02058 5.33815 7.03663 5.31646L7.99325 4.18068C8.70057 3.34527 9.61691 2.71255 10.6487 2.34711C11.6805 1.98166 12.7909 1.8966 13.8663 2.1006C14.0752 3.17941 13.9911 4.29451 13.6226 5.32975C13.2541 6.36498 12.6148 7.28248 11.7712 7.98668ZM11.1559 3.8775C10.9581 3.8775 10.7648 3.93615 10.6003 4.04603C10.4359 4.15592 10.3077 4.31209 10.232 4.49482C10.1563 4.67755 10.1365 4.87861 10.1751 5.07259C10.2137 5.26658 10.309 5.44476 10.4488 5.58461C10.5887 5.72446 10.7668 5.8197 10.9608 5.85829C11.1548 5.89687 11.3559 5.87707 11.5386 5.80138C11.7213 5.7257 11.8775 5.59752 11.9874 5.43307C12.0973 5.26862 12.1559 5.07528 12.1559 4.8775C12.1559 4.74618 12.1301 4.61613 12.0798 4.4948C12.0296 4.37347 11.9559 4.26323 11.863 4.17036C11.7702 4.0775 11.6599 4.00384 11.5386 3.95359C11.4173 3.90334 11.2872 3.87748 11.1559 3.87749L11.1559 3.8775Z" fill="currentColor"></path>
            </svg>
          </span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Bulma Component #551

<section class="section" x-data="{ category: '' }" x-init="category = $refs.tab1.textContent">
  <div class="container">
    <div class="mb-5 has-background-primary" style="border-radius: 4px;">
      <div class="px-6 py-6 columns is-vcentered is-multiline">
        <div class="column is-8-desktop">
          <h3 class="title has-text-white">Are you looking for answers?</h3>
          <p class="subtitle has-text-light is-size-5">We have prepared the most frequently asked questions for you</p>
        </div>
        <div class="column is-4-desktop is-flex is-align-items-center">
          <img class="image is-fullwidth" src="artemis-assets/images/office.png" alt="alt">
        </div>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-3">
        <div class="px-2 pt-2 pb-3 has-background-white" style="border-radius: 4px;">
          <ul class="mb-0">
            <li>
              <a x-on:click.prevent="category = $refs.tab1.textContent" class="button is-flex is-align-items-center is-justify-content-start" :class="{ 'is-primary is-light': category == $refs.tab1.textContent, 'is-white': category != $refs.tab1.textContent }" href="#">
                <svg :class="{ 'has-text-primary-light': category != $refs.tab1.textContent, 'has-text-primary': category == $refs.tab1.textContent }" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.6663 0.833338H3.33301C2.66997 0.833338 2.03408 1.09673 1.56524 1.56557C1.0964 2.03441 0.833008 2.6703 0.833008 3.33334V16.6667C0.833008 17.3297 1.0964 17.9656 1.56524 18.4344C2.03408 18.9033 2.66997 19.1667 3.33301 19.1667H16.6663C17.3294 19.1667 17.9653 18.9033 18.4341 18.4344C18.9029 17.9656 19.1663 17.3297 19.1663 16.6667V3.33334C19.1663 2.6703 18.9029 2.03441 18.4341 1.56557C17.9653 1.09673 17.3294 0.833338 16.6663 0.833338V0.833338ZM6.66634 17.5H3.33301C3.11199 17.5 2.90003 17.4122 2.74375 17.2559C2.58747 17.0996 2.49967 16.8877 2.49967 16.6667V15.6833C2.7669 15.7804 3.04872 15.8311 3.33301 15.8333H6.66634V17.5ZM6.66634 14.1667H3.33301C3.11199 14.1667 2.90003 14.0789 2.74375 13.9226C2.58747 13.7663 2.49967 13.5544 2.49967 13.3333V12.35C2.7669 12.447 3.04872 12.4977 3.33301 12.5H6.66634V14.1667ZM6.66634 10.8333H3.33301C3.11199 10.8333 2.90003 10.7455 2.74375 10.5893C2.58747 10.433 2.49967 10.221 2.49967 10V3.33334C2.49967 3.11232 2.58747 2.90036 2.74375 2.74408C2.90003 2.5878 3.11199 2.5 3.33301 2.5H6.66634V10.8333ZM11.6663 17.5H8.33301V12.5H11.6663V17.5ZM11.6663 10.8333H8.33301V2.5H11.6663V10.8333ZM17.4997 16.6667C17.4997 16.8877 17.4119 17.0996 17.2556 17.2559C17.0993 17.4122 16.8874 17.5 16.6663 17.5H13.333V15.8333H16.6663C16.9506 15.8311 17.2324 15.7804 17.4997 15.6833V16.6667ZM17.4997 13.3333C17.4997 13.5544 17.4119 13.7663 17.2556 13.9226C17.0993 14.0789 16.8874 14.1667 16.6663 14.1667H13.333V12.5H16.6663C16.9506 12.4977 17.2324 12.447 17.4997 12.35V13.3333ZM17.4997 10C17.4997 10.221 17.4119 10.433 17.2556 10.5893C17.0993 10.7455 16.8874 10.8333 16.6663 10.8333H13.333V2.5H16.6663C16.8874 2.5 17.0993 2.5878 17.2556 2.74408C17.4119 2.90036 17.4997 3.11232 17.4997 3.33334V10ZM14.9997 5.83334C14.8349 5.83334 14.6737 5.88221 14.5367 5.97378C14.3997 6.06535 14.2928 6.1955 14.2298 6.34777C14.1667 6.50004 14.1502 6.66759 14.1824 6.82925C14.2145 6.9909 14.2939 7.13938 14.4104 7.25593C14.527 7.37247 14.6754 7.45184 14.8371 7.48399C14.9987 7.51615 15.1663 7.49964 15.3186 7.43657C15.4708 7.3735 15.601 7.26669 15.6926 7.12965C15.7841 6.99261 15.833 6.83149 15.833 6.66667C15.833 6.44566 15.7452 6.2337 15.5889 6.07742C15.4326 5.92113 15.2207 5.83334 14.9997 5.83334ZM4.99967 7.5C5.16449 7.5 5.32561 7.45113 5.46265 7.35956C5.59969 7.26799 5.7065 7.13785 5.76957 6.98557C5.83265 6.8333 5.84915 6.66575 5.817 6.5041C5.78484 6.34244 5.70547 6.19396 5.58893 6.07742C5.47239 5.96087 5.3239 5.8815 5.16225 5.84935C5.0006 5.8172 4.83304 5.8337 4.68077 5.89677C4.5285 5.95984 4.39835 6.06665 4.30678 6.2037C4.21522 6.34074 4.16634 6.50185 4.16634 6.66667C4.16634 6.88768 4.25414 7.09965 4.41042 7.25593C4.5667 7.41221 4.77866 7.5 4.99967 7.5Z" fill="currentColor"></path>
                </svg>
                <span x-ref="tab1" class="is-size-6 ml-3" :class="{ 'has-text-grey': category != $refs.tab1.textContent }">Payments</span>
              </a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Bulma Component #552

<section class="section" x-data="{ tab: 'monthly' }">
  <div class="container">
    <div class="box px-0">
      <div class="px-5 pb-4 is-flex is-justify-content-space-between is-align-items-center" style="border-bottom: 1px solid #E1E4E8;">
        <h5 class="title is-size-4 mb-0">Sales Information</h5>
        <div>
          <button x-on:click="tab = 'daily'" class="button" :class="{ 'is-primary': tab == 'daily', 'is-white has-text-grey': tab != 'daily' }">Daily</button>
          <button x-on:click="tab = 'weekly'" class="button" :class="{ 'is-primary': tab == 'weekly', 'is-white has-text-grey': tab != 'weekly' }">Weekly</button>
          <button x-on:click="tab = 'monthly'" class="button" :class="{ 'is-primary': tab == 'monthly', 'is-white has-text-grey': tab != 'monthly' }">Monthly</button>
        </div>
      </div>
      <div class="table-container pt-4 px-4">
        <table class="table is-fullwidth is-size-7">
          <thead>
            <tr class="has-background-white"><th class="px-4 has-text-grey">Product Name</th><th class="px-4 has-text-grey">Ordered</th><th class="px-4 has-text-grey">Remaining</th><th class="px-4 has-text-grey">Status</th><th class="px-4 has-text-grey">Action</th></tr>
          </thead>
          <tbody :class="{ 'is-hidden': tab != 'monthly' }">
            <tr class="has-background-primary-light">
              <td class="px-4" style="border-bottom: none;">
                <div class="is-flex is-align-items-center">
                  <img class="mr-3 image is-32x32 is-rounded is-cover" src="https://images.unsplash.com/photo-1575537302964-96cd47c06b1b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="alt">
                  <div>
                    <p class="has-text-weight-medium has-text-dark">New Trendy Shoes For Winter</p>
                    <span class="has-text-grey">Winter Red Collection</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Material_Ui Component #553

import { Box, Grid, Typography, Avatar, Button }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            padding: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.grey[50]
        },
        avatar: {
            mt: theme.spacing(1),
            padding: theme.spacing(1.5),
            backgroundColor: theme.palette.primary[500]
        },
        button: {
            color: theme.palette.primary[500],
            backgroundColor: theme.palette.common.white, 
            ':hover': { 
                color: theme.palette.common.white, 
                backgroundColor: theme.palette.primary[500]
            }
        },
        title: {

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Material_Ui Component #554

import { useState } from 'react';
import { Grid, Box, Typography, Tabs, Tab }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            pt: theme.spacing(3.75),
            pl: theme.spacing(3.75),
            pr: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white
        },
        tab: {
            fontSize: theme.spacing(1.75),
            color: theme.palette.grey[300]
        }
    }
    const [value, setValue] = useState(0);

    const handleChange = (event, newValue) => {
      setValue(newValue);
    };

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Material_Ui Component #555

import { Box, Typography }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            p: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.grey[50]
        }
    }

    const content = {
        'Typography1-1': 'Hello, John Doe!',
        ...props.content
    }

    return (
        <Box component="section" sx={styles.section}>
            <Typography variant="h4">{content['Typography1-1']}</Typography>
        </Box>
    )
}

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Material_Ui Component #556

import { Box, Typography }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            p: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white
        }
    }

    const content = {
        'Typography1-1': 'Hello, John Doe!',
        ...props.content
    }

    return (
        <Box component="section" sx={styles.section}>
            <Typography variant="h4">{content['Typography1-1']}</Typography>
        </Box>
    )
}

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Material_Ui Component #557

import { Box, Grid, Typography, Avatar, Button }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            padding: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white
        },
        avatar: {
            mt: theme.spacing(1),
            padding: theme.spacing(1.5),
            backgroundColor: theme.palette.primary[500]
        },
        button: {
            color: theme.palette.primary[500],
            backgroundColor: theme.palette.primary[50],
            ':hover': { 
                color: theme.palette.common.white, 
                backgroundColor: theme.palette.primary[500]
            }
        },
        title: {

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Material_Ui Component #558

import { Box, Grid, Typography, Button, Chip, TextField }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            p: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.grey[50]
        },
        chip: {
            fontSize: theme.spacing(1.5)
        },
        search: {
            position: 'absolute',
            right: 16
        },
        wrapperTextField: {
            position: 'relative',
            [theme.breakpoints.up('lg')]: {
                width: theme.spacing(41.25)
            }
        },
        textField: {

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Material_Ui Component #559

import { Box, Grid, Typography, Button, Chip, TextField }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            p: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white
        },
        chip: {
            fontSize: theme.spacing(1.5)
        },
        search: {
            position: 'absolute',
            right: 16
        },
        wrapperTextField: {
            position: 'relative',
            [theme.breakpoints.up('lg')]: {
                width: theme.spacing(41.25)
            }
        },
        textField: {

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Material_Ui Component #560