I have a rather simple problem I can't solve. I have custom styling for my cards and one of the elements of the cards is the category, when I access the_category() from the Loop it comes with its own weird styling (looks like a list item anchor). I would like to get the url of the category and the name of the category within my while loop, my code is shown below:

<div class="container body-margin">
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="card">
        <div class="row">
            <?php $url = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()), 'thumbnail' ); ?>
            <img src="<?php echo $url ?>" class="img-responsive card-image" />
        </div>

        <div class="row card-body">
            <div><a class="card-body-category" href="#the-category-url"><?php the_category(); ?></a></div>
            <div><h4 class="card-body-title"><b><?php the_title(); ?></b></h4></div>
            <div><p class="card-body-date"><?php the_date(); ?></p></div>
        </div>
    </div>
  <?php endwhile; ?>
</div>

Most of the solutions I saw had people accessing their tags outside the while loop with the get_the_category() function, this does not suit what I want to do, would be really grateful for any help.