notifications, as there are several?

Plural here too?

Plural :p

btn isn't used anywhere, probably artefact remaining from previous proof of concept

should be a standalone function createNotificationCard(notification)

That would return the .card element you can then add to the list

You can perhaps keep the card settings as is and create a new class notification-card in the CSS?

.notificationCard {
    background: $primary-color;

    .someDividerClass {
        someBackgroundOrBorderOption: darken($primary-color, 20%);
    }
}

(no idea where $card-divider-background is used, to check in Foundation card component CSS)

Then you can apply both to your element: class="card notificationCard".