card | کتابخانه کامپوننت‌ها

پیش‌نمایش زنده

کد HTML

<div class="ios-modern-settings__container">
  <div class="ios-modern-settings__header">Settings</div>
  <div class="ios-modern-settings__card">
    <div
      class="ios-modern-settings__icon"
      style="background: linear-gradient(135deg, #007aff, #00c4ff);"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path
          fill="#fff"
          d="M12 21q-1.05 0-1.775-.725T9.5 18.5t.725-1.775T12 16t1.775.725t.725 1.775t-.725 1.775T12 21m0-11q1.875 0 3.563.6t3.062 1.65q.5.375.513.988T18.7 14.3q-.425.425-1.05.438t-1.125-.338q-.95-.65-2.1-1.025T12 13t-2.425.375t-2.1 1.025q-.5.35-1.125.325t-1.05-.45q-.425-.45-.425-1.062t.5-.988q1.375-1.05 3.063-1.638T12 10m0-6q3.125 0 5.888 1.025t4.962 2.9q.5.425.525 1.05t-.425 1.075q-.425.425-1.05.438t-1.125-.388q-1.8-1.475-4.037-2.287T12 7t-4.737.813T3.225 10.1q-.5.4-1.125.388t-1.05-.438Q.6 9.6.625 8.975t.525-1.05q2.2-1.875 4.963-2.9T12 4"
        ></path>
      </svg>
    </div>
    <div class="ios-modern-settings__content">
      <div class="ios-modern-settings__title">Wi-Fi</div>
      <div class="ios-modern-settings__description">
        Connect to wireless networks
      </div>
    </div>
  </div>
  <div class="ios-modern-settings__card">
    <div
      class="ios-modern-settings__icon"
      style="background: linear-gradient(135deg, #5856d6, #8a84ff);"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path
          fill="none"
          stroke="#fff"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="m7 8l10 8l-5 4V4l5 4l-10 8"
        ></path>
      </svg>
    </div>
    <div class="ios-modern-settings__content">
      <div class="ios-modern-settings__title">Bluetooth</div>
      <div class="ios-modern-settings__description">
        Manage Bluetooth devices
      </div>
    </div>
  </div>
  <div class="ios-modern-settings__card">
    <div
      class="ios-modern-settings__icon"
      style="background: linear-gradient(135deg, #34c759, #5ce883);"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path
          fill="#fff"
          d="M472 432h-48a24 24 0 0 1-24-24V104a24 24 0 0 1 24-24h48a24 24 0 0 1 24 24v304a24 24 0 0 1-24 24m-128 0h-48a24 24 0 0 1-24-24V184a24 24 0 0 1 24-24h48a24 24 0 0 1 24 24v224a24 24 0 0 1-24 24m-128 0h-48a24 24 0 0 1-24-24V248a24 24 0 0 1 24-24h48a24 24 0 0 1 24 24v160a24 24 0 0 1-24 24m-128 0H40a24 24 0 0 1-24-24v-96a24 24 0 0 1 24-24h48a24 24 0 0 1 24 24v96a24 24 0 0 1-24 24"
        ></path>
      </svg>
    </div>
    <div class="ios-modern-settings__content">
      <div class="ios-modern-settings__title">Cellular</div>
      <div class="ios-modern-settings__description">
        Configure mobile data &amp; SIM
      </div>
    </div>
  </div>
  <div class="ios-modern-settings__card">
    <div
      class="ios-modern-settings__icon"
      style="background: linear-gradient(135deg, #00ddeb, #00b8d4);"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path
          fill="none"
          stroke="#fff"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2.5"
          d="M21 10.5v3M6 17h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2"
        ></path>
      </svg>
    </div>
    <div class="ios-modern-settings__content">
      <div class="ios-modern-settings__title">Battery</div>
      <div class="ios-modern-settings__description">
        View battery usage &amp; settings
      </div>
    </div>
  </div>
  <div class="ios-modern-settings__card">
    <div
      class="ios-modern-settings__icon"
      style="background: linear-gradient(135deg, #ff9500, #ffcc00);"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="21"
        height="21"
        viewBox="0 0 21 21"
      >
        <path
          fill="none"
          stroke="#fff"
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M5 3.5h11a2 2 0 0 1 2 2v6.049a2 2 0 0 1-1.85 1.994l-.158.006l-11-.042a2 2 0 0 1-1.992-2V5.5a2 2 0 0 1 2-2m.464 12H15.5m-8 2h6"
          stroke-width="1.5"
        ></path>
      </svg>
    </div>
    <div class="ios-modern-settings__content">
      <div class="ios-modern-settings__title">Display &amp; Brightness</div>
      <div class="ios-modern-settings__description">
        Adjust brightness &amp; text size
      </div>
    </div>
  </div>
  <div class="ios-modern-settings__card">
    <div
      class="ios-modern-settings__icon"
      style="background: linear-gradient(135deg, #ff2d55, #ff6b88);"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <g fill="none" stroke="#fff" stroke-width="2">
          <path
            d="M3.158 13.93a3.75 3.75 0 0 1 0-3.86a1.5 1.5 0 0 1 .993-.7l1.693-.339a.45.45 0 0 0 .258-.153L8.17 6.395c1.182-1.42 1.774-2.129 2.301-1.938S11 5.572 11 7.42v9.162c0 1.847 0 2.77-.528 2.962c-.527.19-1.119-.519-2.301-1.938L6.1 15.122a.45.45 0 0 0-.257-.153L4.15 14.63a1.5 1.5 0 0 1-.993-.7Z"
          ></path>
          <path
            stroke-linecap="round"
            d="M15.536 8.464a5 5 0 0 1 .027 7.044m4.094-9.165a8 8 0 0 1 .044 11.27"
          ></path>
        </g>
      </svg>
    </div>
    <div class="ios-modern-settings__content">
      <div class="ios-modern-settings__title">Sounds &amp; Haptics</div>
      <div class="ios-modern-settings__description">
        Manage ringtones &amp; vibrations
      </div>
    </div>
  </div>
  <div class="ios-modern-settings__card">
    <div
      class="ios-modern-settings__icon"
      style="background: linear-gradient(135deg, #ff3b30, #ff7964);"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path
          fill="none"
          stroke="#fff"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="32"
          d="M427.68 351.43C402 320 383.87 304 383.87 217.35C383.87 138 343.35 109.73 310 96c-4.43-1.82-8.6-6-9.95-10.55C294.2 65.54 277.8 48 256 48s-38.21 17.55-44 37.47c-1.35 4.6-5.52 8.71-9.95 10.53c-33.39 13.75-73.87 41.92-73.87 121.35C128.13 304 110 320 84.32 351.43C73.68 364.45 83 384 101.61 384h308.88c18.51 0 27.77-19.61 17.19-32.57M320 384v16a64 64 0 0 1-128 0v-16"
        ></path>
      </svg>
    </div>
    <div class="ios-modern-settings__content">
      <div class="ios-modern-settings__title">Notifications</div>
      <div class="ios-modern-settings__description">Manage app alerts</div>
    </div>
  </div>
  <div class="ios-modern-settings__card">
    <div
      class="ios-modern-settings__icon"
      style="background: linear-gradient(135deg, #007aff, #00c4ff);"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="#ffffff"
      >
        <path
          d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"
        ></path>
      </svg>
    </div>
    <div class="ios-modern-settings__content">
      <div class="ios-modern-settings__title">Privacy &amp; Security</div>
      <div class="ios-modern-settings__description">
        Manage permissions &amp; tracking
      </div>
    </div>
  </div>
</div>

کد CSS

.ios-modern-settings__container {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", sans-serif;
  max-width: 300px;
  width: 100%;
  height: 380px;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
  position: relative;
  scrollbar-width: none; /* Firefox */
}

.ios-modern-settings__container::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.ios-modern-settings__header {
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  margin: 8px 0 14px 12px;
  letter-spacing: -0.4px;
}

.ios-modern-settings__card {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 4px 0;
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.28, 0.11, 0.32, 1),
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ios-modern-settings__card:hover {
  background-color: #f7f7f8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.ios-modern-settings__card:active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}

.ios-modern-settings__icon {
  width: 34px;
  height: 34px;
  margin-right: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  transition: transform 0.25s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.ios-modern-settings__card:hover .ios-modern-settings__icon {
  transform: scale(1.05);
}

.ios-modern-settings__icon svg {
  width: 22px;
  height: 22px;
}

.ios-modern-settings__content {
  flex: 1;
}

.ios-modern-settings__title {
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  margin: 0;
  letter-spacing: -0.3px;
}

.ios-modern-settings__description {
  font-size: 13px;
  color: #6b7280;
  margin: 2px 0 0;
  line-height: 1.3;
}

/* Fade-in animation for cards */
.ios-modern-settings__card {
  opacity: 0;
  transform: translateY(12px);
  animation: ios-modern-settings__fadeInUp 0.35s
    cubic-bezier(0.28, 0.11, 0.32, 1) forwards;
}

.ios-modern-settings__card:nth-child(1) {
  animation-delay: 0.05s;
}
.ios-modern-settings__card:nth-child(2) {
  animation-delay: 0.1s;
}
.ios-modern-settings__card:nth-child(3) {
  animation-delay: 0.15s;
}
.ios-modern-settings__card:nth-child(4) {
  animation-delay: 0.2s;
}
.ios-modern-settings__card:nth-child(5) {
  animation-delay: 0.25s;
}
.ios-modern-settings__card:nth-child(6) {
  animation-delay: 0.3s;
}
.ios-modern-settings__card:nth-child(7) {
  animation-delay: 0.35s;
}
.ios-modern-settings__card:nth-child(8) {
  animation-delay: 0.4s;
}

@keyframes ios-modern-settings__fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

نوع: card

تاریخ ایجاد: 2026/06/06

آخرین بروزرسانی: 2026/06/06