Custom button card module failing to reach linked page

[IRhubuser17]

Hi,
I've developed a little card that houses an image and title text. When you hover over the card it will animate slightly and the image turns from black and white to color. I'd like the entire card to act as a button and link to another page. For some reason that hasn't been possible and I continuously get a 404 not found. I've tried the 'page' field and the 'link' field. Neither seem to work...

Here's the code for context:
HTML
<a href="{{ content_by_id(module.page_field) }}" class="card-link">
<div class="card">
<div class="card-content">
<div class="card-text">
<h2 class="card-title">{% inline_text field="card_title" value="{{ module.card_title }}" %}</h2>
<!-- Your text content goes here -->
</div>
<div class="card-image">
{% if module.image_field.src %}
{% set sizeAttrs = 'width="{{ module.image_field.width }}" height="{{ module.image_field.height }}"' %}
{% if module.image_field.size_type == 'auto' %}
{% set sizeAttrs = 'width="{{ module.image_field.width }}" height="{{ module.image_field.height }}" style="max-width: 100%; height: auto;"' %}
{% elif module.image_field.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="{{ module.image_field.max_width }}" height="{{ module.image_field.max_height }}" style="max-width: 100%; height: auto;"' %}
{% endif %}
{% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %}
<img class="image-colorful" src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
</div>
</div>
</div>
</a>


CSS

/* CSS for the sinking card and button styling */
.card-link {
text-decoration: none; /* Remove underline from the link */
}

.card {
width: 350px;
height: 400px; /* Set the desired height for the card */
background-color: #00AEAB;
border-radius: 10px;
overflow: hidden;
position: relative;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
display: flex;
flex-direction: column;
justify-content: space-between; /* Move content to the top and bottom of the card */
}

.card:hover {
transform: translateY(-10px);
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
}

.card-content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%; /* Ensure the content takes up the entire card height */
}

.card-text {
text-align: center;
padding-top: 5px; /* Add 10 pixels of padding above the text */
padding-bottom: 0px; /* Add 10 pixels of padding below the text */
font-size: 24px;
font-weight: bold;
color: white; /* Set the text color to white */
}

.card-title {
margin-bottom: 10px; /* Add spacing below the title */
}

.card-image {
overflow: hidden;
}

.image-colorful {
filter: grayscale(100%);
transition: filter 0.3s;
}

.card:hover .image-colorful {
filter: grayscale(0%);
}

[Jaycee_Lewis]

Hey, @IRhubuser17 👋

Here are two things you can try to help narrow down where the issue is occurring:

• Try hardcoding a value for the URL <a href="https://www.google.com" class="card-link"> If it works, you can look at how  you're retrieving or storing the URL in the page_field
• Print out the module value for debugging
  

  {{ module.page_field }}
  

Best,

Jaycee