CI-Portal

CI-Portal
CI-Portal
Abmelden
Support

Was gibt's Neues?

1.00.000

Verwaltung von Werbekanälen

Werbekanäle wie Social Media, Plakate oder Screens lassen sich zentral im System erfassen und verwalten. So werden Kampagnen kanalübergreifend planbar und übersichtlich dokumentiert.

Dropdowns

Simple

Account settings Support License 
<div class="flex flex-wrap gap-8 items-start justify-center max-w-3xl mx-auto w-full h-60">
  <el-dropdown class="inline-block">
    <button
      class="inline-flex items-center justify-center group gap-2 rounded-2xl border border-zinc-200/80 bg-white/70 px-4 py-2 text-base font-semibold text-zinc-700 shadow-sm hover:bg-zinc-100/70 dark:border-zinc-700/80 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:bg-zinc-800/60 transition duration-200">
      Button base
      <i class="hgi hgi-stroke hgi-rounded hgi-arrow-down-01 icon-base group-aria-expanded:rotate-180 transform transition-all duration-200"></i>
    </button>
  
    <el-menu anchor="bottom end" popover id="dropdowns-simple"
      class="m-0 w-56 origin-top-right rounded-2xl bg-white p-0 shadow-lg outline outline-1 outline-black/5 transition [--anchor-gap:theme(spacing.2)] [transition-behavior:allow-discrete] data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in dark:bg-zinc-900 dark:shadow-none dark:-outline-offset-1 dark:outline-zinc-800">
      <div class="p-1">
        <a href="#" class="block rounded-xl px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 outline-none dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white transition duration-200">
          Account settings
        </a>
        <a href="#" class="block rounded-xl px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 outline-none dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white transition duration-200">
          Support
        </a>
        <a href="#" class="block rounded-xl px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 outline-none dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white transition duration-200">
          License
        </a>
      </div>
    </el-menu>
  </el-dropdown>
</div>

With dividers

Account settings
Support License
Log out 
<div class="flex flex-wrap gap-8 items-start justify-center max-w-3xl mx-auto w-full h-60">
  <el-dropdown class="inline-block">
    <button
      class="inline-flex items-center justify-center group gap-2 rounded-2xl border border-zinc-200/80 bg-white/70 px-4 py-2 text-base font-semibold text-zinc-700 shadow-sm hover:bg-zinc-100/70 dark:border-zinc-700/80 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:bg-zinc-800/60 transition duration-200">
      Button base
      <i class="hgi hgi-stroke hgi-rounded hgi-arrow-down-01 icon-base group-aria-expanded:rotate-180 transform transition-all duration-200"></i>
    </button>
  
    <el-menu anchor="bottom end" popover id="dropdowns-dividers"
      class="m-0 w-56 origin-top-right rounded-2xl bg-white p-0 shadow-lg outline outline-1 outline-black/5 transition [--anchor-gap:theme(spacing.2)] [transition-behavior:allow-discrete] data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in dark:bg-zinc-900 dark:shadow-none dark:-outline-offset-1 dark:outline-zinc-800">
      <div class="p-1">
        <a href="#" class="block rounded-xl px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 outline-none dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white transition duration-200">
          Account settings
        </a>
        <hr class="my-1 mx-4 dark:border-zinc-700">
        <a href="#" class="block rounded-xl px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 outline-none dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white transition duration-200">
          Support
        </a>
        <a href="#" class="block rounded-xl px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 outline-none dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white transition duration-200">
          License
        </a>
        <hr class="my-1 mx-4 dark:border-zinc-700">
        <a href="#"
          class="block rounded-xl px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 outline-none dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white transition duration-200">
          Log out
        </a>
      </div>
    </el-menu>
  </el-dropdown>
</div>

With icons

Account settings Support License 
<div class="flex flex-wrap gap-8 items-start justify-center max-w-3xl mx-auto w-full h-60">
  <el-dropdown class="inline-block">
    <button
      class="inline-flex items-center justify-center group gap-2 rounded-2xl border border-zinc-200/80 bg-white/70 px-4 py-2 text-base font-semibold text-zinc-700 shadow-sm hover:bg-zinc-100/70 dark:border-zinc-700/80 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:bg-zinc-800/60 transition duration-200">
      Button base
      <i class="hgi hgi-stroke hgi-rounded hgi-arrow-down-01 icon-base group-aria-expanded:rotate-180 transform transition-all duration-200"></i>
    </button>
  
    <el-menu anchor="bottom end" popover id="dropdowns-simple"
      class="m-0 w-56 origin-top-right rounded-2xl bg-white p-0 shadow-lg outline outline-1 outline-black/5 transition [--anchor-gap:theme(spacing.2)] [transition-behavior:allow-discrete] data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in dark:bg-zinc-900 dark:shadow-none dark:-outline-offset-1 dark:outline-zinc-800">
      <div class="p-1">
        <a href="#" class="inline-flex w-full items-center gap-2 rounded-xl px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 outline-none dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white transition duration-200">
          <span class="flex h-4 w-6 items-center justify-center me-1 group-aria-selected:text-primary-600">
            <i class="hgi hgi-stroke hgi-rounded hgi-settings-02 icon-base"></i>
          </span>
          <span class="flex-1 text-left">Account settings</span>
        </a>
        <a href="#"
          class="inline-flex w-full items-center gap-2 rounded-xl px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 outline-none dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white transition duration-200">
          <span class="flex h-4 w-6 items-center justify-center me-1 group-aria-selected:text-primary-600">
            <i class="hgi hgi-stroke hgi-rounded hgi-customer-service-01 icon-base"></i>
          </span>
          <span class="flex-1 text-left">Support</span>
        </a>
        <a href="#"
          class="inline-flex w-full items-center gap-2 rounded-xl px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 outline-none dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white transition duration-200">
          <span class="flex h-4 w-6 items-center justify-center me-1 group-aria-selected:text-primary-600">
            <i class="hgi hgi-stroke hgi-rounded hgi-shield-key icon-base"></i>
          </span>
          <span class="flex-1 text-left">License</span>
        </a>
      </div>
    </el-menu>
  </el-dropdown>
</div>

With simple headers

Für Dich
Account settings Support License
System
Admin 
<div class="flex flex-wrap gap-8 items-start justify-center max-w-3xl mx-auto w-full h-72">
  <el-dropdown class="inline-block">
    <button
      class="inline-flex items-center justify-center group gap-2 rounded-2xl border border-zinc-200/80 bg-white/70 px-4 py-2 text-base font-semibold text-zinc-700 shadow-sm hover:bg-zinc-100/70 dark:border-zinc-700/80 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:bg-zinc-800/60 transition duration-200">
      Button base
      <i class="hgi hgi-stroke hgi-rounded hgi-arrow-down-01 icon-base group-aria-expanded:rotate-180 transform transition-all duration-200"></i>
    </button>
  
    <el-menu anchor="bottom end" popover id="dropdowns-simple"
      class="m-0 w-56 origin-top-right rounded-2xl bg-white p-0 shadow-lg outline outline-1 outline-black/5 transition [--anchor-gap:theme(spacing.2)] [transition-behavior:allow-discrete] data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in dark:bg-zinc-900 dark:shadow-none dark:-outline-offset-1 dark:outline-zinc-800">
      <div class="p-1">
        <div class="text-xs/6 font-semibold text-gray-400 ms-2 mt-2">Für Dich</div>
        <a href="#" class="block rounded-xl px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 outline-none dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white transition duration-200">
          Account settings
        </a>
        <a href="#" class="block rounded-xl px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 outline-none dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white transition duration-200">
          Support
        </a>
        <a href="#" class="block rounded-xl px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 outline-none dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white transition duration-200">
          License
        </a>
        <div class="text-xs/6 font-semibold text-gray-400 ms-2 mt-2">System</div>
        <a href="#"
          class="block rounded-xl px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 outline-none dark:text-white dark:hover:bg-zinc-800 dark:hover:text-white transition duration-200">
          Admin
        </a>
      </div>
    </el-menu>
  </el-dropdown>
</div>

CI-Portal by LF8-Systems © All rights reserved.

Version 0.14.030 by Lukas Sommerfeld