htmlcsscard

What is the correct code to reproduce the design of the following HTML element in vanillaframework?

I want to reproduce the following design of the card component in Vanilla Framework. Please note, that only the design of the card element is of concern here and not the content inside the card element.

enter image description here

So far I have been able to reproduce this design.

The design so far

with the code below:

<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-4.2.0.min.css" />

<div class="col-4">
   <div class="p-card--highlighted">
      <img class="p-card__image" src="https://assets.ubuntu.com/v1/0f33d832-The-State-of-Robotics.jpg">
      <div class="p-card__inner">
         <h3>The State of Robotics - August 2021</h3>
         <p>From robots learning to encourage social participation to detect serious environmental problems, it was a learning month.</p>
      </div>
      <hr class="u-no-margin--bottom">
      <div class="p-card__inner">
         by <a href="#">Bartek Szopka</a> on 21st August 2021
      </div>
   </div>
</div>

Question: Since I want the design in the image 1

  1. How do I bring the highlighted color at the top?
  2. How do I round the edges of the card?
  3. How do I deepen/darken the shadow of this card?

The framework I am using is Vanilla Framework and the component that I am using is highlighted card

Solution
    1. How do I bring the highlighted color at the top?

    You can use border-top in CSS.

    For example:

    <div style="border-top: 3px solid red"></div>
    1. How do I round the edges of the card?

    You can use border-radius in CSS.

    For example:

    <div style="border-radius: 10px"></div>
    1. How do I deepen/darken the shadow of this card?

    You can use box-shadow in CSS.

    For example:

    <div style="box-shadow: 2px 2px 5px rgb(255, 255, 255)"></div>