Semantic markup for card blocks
200_success' comment is right, that the context and the content of the component is important for semantics. I assume, from the linked page, that you want to display a list of short articles that lead to more detailed information.



That being said. Let's look at your rewrite:

Outer section-element.

While a section might be fine, to me this looks more like a list of short articles. So I would use an article-element here.


  The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.


From w3.org 4.4.4 The article element

Also interesting on Stackoverflow: Semantic HTML of an articles list

header-element

If you only have a heading-element and no other content for the the header of a sectioning-element, you should drop the extra header-element, as:


  These elements [h1 … h6] represent headings for their sections.


From w3.org 4.3.6 The h1, h2, h3, h4, h5, and h6 elements

Nested section-element

The paragraph is the actual content of this item. Its context is not a standalone section, as implied, when wrapping it in another section-element:


  The HTML  element represents a standalone section


From MDN &lt;section&gt;: The Generic Section element

So drop that section as well.

footer-element

Using a footer-element here is debatable (as all other points as well). From the docs point of view it's absolutely fine:


  A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.


From w3.org 4.4.9 The footer element

However, personally I would drop it for simplicity.



Finally we remove everything that is not needed for styling – in regard of your linked layout – and end up with this:

 &lt;article&gt;
    &lt;h1&gt;Card heading&lt;/h1&gt;
    &lt;p&gt;Some teaser …&lt;/p&gt;
    &lt;a href=""&gt;Learn more …&lt;/a&gt;
&lt;/article&gt;