<a href="#">
  <div class="card">
    <h2>Link-Wrapped Card</h2>
    <div class="card__icon">
      <svg viewBox="0 0 100 100">
        <g transform="translate(0,-952.36218)">
          <path style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:#000000;enable-background:accumulate;" d="m 20,984.36256 c -9.9374,0 -18,8.06262 -18,18.00004 0,9.9374 8.0626,18 18,18 l 19,0 a 2.0002,2.0002 0 1 0 0,-4 l -19,0 c -7.7906,0 -13.9999999,-6.2094 -13.9999999,-14 0,-7.79062 6.2093999,-14.00004 13.9999999,-14.00004 l 21,0 c 7.7906,0 14,6.20942 14,14.00004 a 2.0002,2.0002 0 1 0 4,0 c 0,-9.93742 -8.0626,-18.00004 -18,-18.00004 l -21,0 z m 40.875,0 a 2.0009763,2.0009763 0 1 0 0.125,4 l 19,0 c 7.7906,0 14,6.20942 14,14.00004 0,7.7906 -6.2094,14 -14,14 l -21,0 c -7.7906,0 -14,-6.2094 -14,-14 a 2.0002,2.0002 0 1 0 -4,0 c 0,9.9374 8.0626,18 18,18 l 21,0 c 9.9374,0 18,-8.0626 18,-18 0,-9.93742 -8.0626,-18.00004 -18,-18.00004 l -19,0 a 2.0002,2.0002 0 0 0 -0.125,0 z" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"></path>
        </g>
      </svg>
    </div>
    <p>Eveything in this link effectively becomes a link as well.</p>
  </div>
</a>

<div class="card">
  <h2>
    <a href="#0">Card with Cover Link</a>
  </h2>
  <div class="card__icon">
    <svg viewBox="0 0 100 100">
      <g transform="translate(0,-952.36218)">
        <path style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:#000000;enable-background:accumulate;" d="m 20,984.36256 c -9.9374,0 -18,8.06262 -18,18.00004 0,9.9374 8.0626,18 18,18 l 19,0 a 2.0002,2.0002 0 1 0 0,-4 l -19,0 c -7.7906,0 -13.9999999,-6.2094 -13.9999999,-14 0,-7.79062 6.2093999,-14.00004 13.9999999,-14.00004 l 21,0 c 7.7906,0 14,6.20942 14,14.00004 a 2.0002,2.0002 0 1 0 4,0 c 0,-9.93742 -8.0626,-18.00004 -18,-18.00004 l -21,0 z m 40.875,0 a 2.0009763,2.0009763 0 1 0 0.125,4 l 19,0 c 7.7906,0 14,6.20942 14,14.00004 0,7.7906 -6.2094,14 -14,14 l -21,0 c -7.7906,0 -14,-6.2094 -14,-14 a 2.0002,2.0002 0 1 0 -4,0 c 0,9.9374 8.0626,18 18,18 l 21,0 c 9.9374,0 18,-8.0626 18,-18 0,-9.93742 -8.0626,-18.00004 -18,-18.00004 l -19,0 a 2.0002,2.0002 0 0 0 -0.125,0 z" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"></path>
      </g>
    </svg>
  </div>
  <p>Eveything in this link effectively becomes a link as well.</p>
</div>

body {
  display: flex;
  height: 100vh;
  align-items: center;
  margin: 0;
  justify-content: center;
}

.card {
  border: 1px solid #eaeaea;
  border-radius: 15px;
  box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  width: 200px;
  margin: 1rem;
  position: relative;
}

.card__icon {
  align-self: center;
  fill: blue;
  order: 1;
  width: 100px;
}

.card h2 {
  order: 2;
}
.card h2 a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.card p {
  order: 3;
}