Card

.header, .content, .footer have the same spacing.
.header will provide you bottom border style and .footer will provide you top border style.

Card Structure

Click to copy
 
<div class="card">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

Example with elements inside

Card Structure

Click to copy
 
<div class="card">
    <div class="header  grid grid-gap-s">
        <h2>Licence key</h2>
        <p>features are not availeble if licence is not active</p>
    </div>
    <div class="content grid grid-gap-s">
            <label>Paste licence key</label>
            <input type="text" placeholder="Key">        
    </div>
    <div class="footer">
        If you have problem with the linces send us support email at <a href="#">here</a>
    </div>
</div>

Licence key

features are not availeble if licence is not active

If you have problem with the linces send us support email at here

In the same area