List Group

View all list group examples

Edit on Github

Example

  • kal
    Aerovek

    AERO-458bbf

    1.3496 ( $0.06)

  • kal
    BHNetwork

    BHAT-c1fde3

    0.5799 ( $0.06)

  • kal
    EffortToken

    EFFORT-a13513

    1.3496 ( $0.01)

  • kal
    IsengardToken

    ISET-84e55e

    3.8908 ( $0.01) 

  • <div class="card border shadow-xs h-100">
  <div class="card-body p-3 pt-0">
    <ul class="list-group">
      <li class="list-group-item border-0 d-flex align-items-center px-0 mb-1">
        <div class="avatar avatar-sm rounded-circle me-3">
          <img src="https://media.elrond.com/tokens/asset/AERO-458bbf/logo.svg" alt="kal" class="w-100">
        </div>
        <div class="d-flex align-items-start flex-column justify-content-center">
          <h6 class="mb-0 font-weight-semibold text-lg">Aerovek</h6>
          <p class="mb-0 text-xs text-secondary">AERO-458bbf</p>
          <p class="mb-0 mt-2 font-weight-bold text-sm text-dark">1.3496 ( <span>$0.06</span>) </p>
        </div>
        <button type="button" class="btn btn-sm btn-outline-info ms-auto mb-0">Send</button>
      </li>
      <li class="list-group-item border-0 d-flex align-items-center px-0 mb-1">
        <div class="avatar avatar-sm rounded-circle me-3">
          <img src="https://media.elrond.com/tokens/asset/BHAT-c1fde3/logo.svg" alt="kal" class="w-100">
        </div>
        <div class="d-flex align-items-start flex-column justify-content-center">
          <h6 class="mb-0 font-weight-semibold text-lg">BHNetwork</h6>
          <p class="mb-0 text-xs text-secondary">BHAT-c1fde3</p>
          <p class="mb-0 mt-2 font-weight-bold text-sm text-dark">0.5799 ( <span>$0.06</span>) </p>
        </div>
        <button type="button" class="btn btn-sm btn-outline-info ms-auto mb-0">Send</button>
      </li>
      <li class="list-group-item border-0 d-flex align-items-center px-0 mb-1">
        <div class="avatar avatar-sm rounded-circle me-3">
          <img src="https://media.elrond.com/tokens/asset/EFFORT-a13513/logo.svg" alt="kal" class="w-100">
        </div>
        <div class="d-flex align-items-start flex-column justify-content-center">
          <h6 class="mb-0 font-weight-semibold text-lg">EffortToken</h6>
          <p class="mb-0 text-xs text-secondary">EFFORT-a13513</p>
          <p class="mb-0 mt-2 font-weight-bold text-sm text-dark">1.3496 ( <span>$0.01</span>) </p>
        </div>
        <button type="button" class="btn btn-sm btn-outline-info ms-auto mb-0">Send</button>
      </li>
      <li class="list-group-item border-0 d-flex align-items-center px-0 mb-1">
        <div class="avatar avatar-sm rounded-circle me-3">
          <img src="https://media.elrond.com/tokens/asset/ISET-84e55e/logo.svg" alt="kal" class="w-100">
        </div>
        <div class="d-flex align-items-start flex-column justify-content-center">
          <h6 class="mb-0 font-weight-semibold text-lg">IsengardToken</h6>
          <p class="mb-0 text-xs text-secondary">ISET-84e55e</p>
          <p class="mb-0 mt-2 font-weight-bold text-sm text-dark">3.8908 ( <span>$0.01</span>) </p>
        </div>
        <button type="button" class="btn btn-sm btn-outline-info ms-auto mb-0">Send</button>
      </li>
    </ul>
  </div>
</div>

  • <div className="card border shadow-xs h-100">
  <div className="card-body p-3 pt-0">
    <ul className="list-group">
      <li className="list-group-item border-0 d-flex align-items-center px-0 mb-1">
        <div className="avatar avatar-sm rounded-circle me-3">
          <img
            src="https://media.elrond.com/tokens/asset/AERO-458bbf/logo.svg"
            alt="kal"
            className="w-100"
          />
        </div>
        <div className="d-flex align-items-start flex-column justify-content-center">
          <h6 className="mb-0 font-weight-semibold text-lg">
            Aerovek
          </h6>
          <p className="mb-0 text-xs text-secondary">
            AERO-458bbf
          </p>
          <p className="mb-0 mt-2 font-weight-bold text-sm text-dark">1.3496 (<span>$0.06</span>)</p>
        </div>
        <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-0">Send</button>
      </li>
      <li className="list-group-item border-0 d-flex align-items-center px-0 mb-1">
        <div className="avatar avatar-sm rounded-circle me-3">
          <img
            src="https://media.elrond.com/tokens/asset/BHAT-c1fde3/logo.svg"
            alt="kal"
            className="w-100"
          />
        </div>
        <div className="d-flex align-items-start flex-column justify-content-center">
          <h6 className="mb-0 font-weight-semibold text-lg">
            BHNetwork
          </h6>
          <p className="mb-0 text-xs text-secondary">
            BHAT-c1fde3
          </p>
          <p className="mb-0 mt-2 font-weight-bold text-sm text-dark">0.5799 (<span>$0.06</span>)</p>
        </div>
        <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-0">Send</button>
      </li>
      <li className="list-group-item border-0 d-flex align-items-center px-0 mb-1">
        <div className="avatar avatar-sm rounded-circle me-3">
          <img
            src="https://media.elrond.com/tokens/asset/EFFORT-a13513/logo.svg"
            alt="kal"
            className="w-100"
          />
        </div>
        <div className="d-flex align-items-start flex-column justify-content-center">
          <h6 className="mb-0 font-weight-semibold text-lg">
            EffortToken
          </h6>
          <p className="mb-0 text-xs text-secondary">
            EFFORT-a13513
          </p>
          <p className="mb-0 mt-2 font-weight-bold text-sm text-dark">1.3496 (<span>$0.01</span>)</p>
        </div>
        <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-0">Send</button>
      </li>
      <li className="list-group-item border-0 d-flex align-items-center px-0 mb-1">
        <div className="avatar avatar-sm rounded-circle me-3">
          <img
            src="https://media.elrond.com/tokens/asset/ISET-84e55e/logo.svg"
            alt="kal"
            className="w-100"
          />
        </div>
        <div className="d-flex align-items-start flex-column justify-content-center">
          <h6 className="mb-0 font-weight-semibold text-lg">
            IsengardToken
          </h6>
          <p className="mb-0 text-xs text-secondary">
            ISET-84e55e
          </p>
          <p className="mb-0 mt-2 font-weight-bold text-sm text-dark">3.8908 (<span>$0.01</span>)</p>
        </div>
        <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-0">Send</button>
      </li>
    </ul>
  </div>
</div>