Cards | 0xnihilism thin crab 36

Cardsthin crab1 个文件更新于 2026-04-06
html共 24 行
<div class="brutalist-card">
  <div class="brutalist-card__header">
    <div class="brutalist-card__icon">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
        ></path>
      </svg>
    </div>
    <div class="brutalist-card__alert">Warning</div>
  </div>
  <div class="brutalist-card__message">
    This is a brutalist card with a very angry button. Proceed with caution,
    you've been warned.
  </div>
  <div class="brutalist-card__actions">
    <a class="brutalist-card__button brutalist-card__button--mark" href="#"
      >Mark as Read</a
    >
    <a class="brutalist-card__button brutalist-card__button--read" href="#"
      >Okay</a
    >
  </div>
</div>

登录后可以查看完整源码、在线编辑并实时预览运行效果。