<div class="c-card">
    <div class="c-card__body">
        <h4 class="c-card__title">Card title</h4>
        <p class="u-text-muted"> Subline</p>
    </div>
</div>

<a class="c-card" href="#">
    <div class="c-card__body">
        <div class="c-avatar-and-text">
            <div class="c-avatar c-avatar--medium">
                <div class="o-svg-icon o-svg-icon-user o-svg-icon--undefined ">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4ZM6 8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8C18 11.3137 15.3137 14 12 14C8.68629 14 6 11.3137 6 8ZM8 18C6.34315 18 5 19.3431 5 21C5 21.5523 4.55228 22 4 22C3.44772 22 3 21.5523 3 21C3 18.2386 5.23858 16 8 16H16C18.7614 16 21 18.2386 21 21C21 21.5523 20.5523 22 20 22C19.4477 22 19 21.5523 19 21C19 19.3431 17.6569 18 16 18H8Z" fill="#595959" />
                    </svg>
                </div>
            </div>
            <div class="c-avatar-and-text__text">
                <h4 class="c-avatar-and-text__title">Team member</h4>
                <p class="u-text-muted">Role</p>
            </div>
        </div>
    </div>
</a>

<a class="c-card" href="#">
    <div class="c-card__img">
        <img src="https://via.placeholder.com/1600x900" alt="" />
    </div>
    <div class="c-card__body">
        <h4 class="c-card__title">Card title</h4>
        <p class="u-text-muted">Subtitle</p>
    </div>
</a>

<div class="c-card">
    <div class="c-card__body">
        <h4 class="c-card__title">Card title</h4>
        <p class="u-text-muted">Subtitle</p>
    </div>
    <div class="c-card__actions">
        <div class="c-button-toolbar">
            <button class="c-button c-button--borderless c-button--icon" type="button">
                <span class="c-button__content">
                    <div class="o-svg-icon o-svg-icon-edit  ">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                        </svg>
                    </div>
                    <div class="u-sr-accessible">Edit
                    </div>
                </span>
            </button>
            <button class="c-button c-button--borderless c-button--icon" type="button">
                <span class="c-button__content">
                    <div class="o-svg-icon o-svg-icon-delete  ">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z" fill="#595959" />
                        </svg>
                    </div>
                    <div class="u-sr-accessible">Delete
                    </div>
                </span>
            </button>
        </div>
    </div>
</div>