DISCUSSION utilize d-flex flex-column for more consistent placement of component elements

[muskie9]

TLDR;
For bootstrap components such as cards, having consistent spacing of image, title, body, and link will improve the overall display visually. This will help especially in cases where a particular element within the card is not present, normally affecting the height and layout of the card.

Potential Blocks For Consideration

• Blog Posts
• Promos
• Features
• Staff/Bio
• Sponsors
• Card (may depend on the Row block as a requirement in Grid)

Rough Comparison

A rough visual to help see how it can affect the verticality of the layout is below. Notice the buttons are now aligned bottom. The third card's contents are also vertically justified slightly different due to the current html structure, however grouping the text and button in a containing element could allow keeping the post meta at the top while justifying the content/button to the card (column) "end".

Conclusion

Uniform alignment of various card elements for like components provide a much more consistent experience and layout for the end user. Improving on the structure of various components to allow for flex content justification on the column should help provide that consistent experience.

Code Sample - Sponsors Block

<% if $Title && $ShowTitle %><h2 class="element__title">$Title</h2><% end_if %>
<% if $Content %>
    <div class="element__content">$Content</div><% end_if %>

<% if $SponsorsList %>
    <div class="row">
    <% loop $SponsorsList %>
            <div class="card col-md-3 mb-3 d-flex flex-column justify-content-between">
                <% if $Image %>
                    <% if $ElementLink.LinkURL %>
                    <a href="$ElementLink.LinkURL"<% if $ElementLink.OpenInNewWindow %>
                       target="_blank"<% end_if %> title="Go to $Title.ATT" aria-label="Go to $Title.ATT"><% end_if %>
                    <img
                        src="<% if $ImageBackgroundColor %>$Image.Pad(576,576,$ImageBackgroundColor).URL<% else %>$Image.Pad(576,576).URL<% end_if %>"
                        class="img-fluid card-img-top cap"<% if $ImageBackgroundColor %>
                        style="background-color: #{$ImageBackgroundColor}"<% end_if %> alt="$Title.ATT"><% end_if %>
                <% if $ElementLink.LinkURL %></a><% end_if %>
                <div class="card-body d-flex flex-column<% if $Image %> justify-content-between<% else %> justify-content-end<% end_if %>">
                    <% if $Title && $ShowTitle %><h3 class="card-title">$Title</h3><% end_if %>
                    <% if $Content %>
                        <div class="card-text">$Content</div><% end_if %>
                    <% if $ElementLink %><p><% with $ElementLink %>
                        <a href="$URL"<% if $OpenInNewWindow %>
                           target="_blank"<% end_if %> aria-label="Go to $Title" class="btn btn-primary">$Title</a>
                    <% end_with %></p><% end_if %>
                </div>
            </div>
        <% if $MultipleOf(4,1) && not Last %>
            </div>
            <div class="row sponsors-list">
        <% end_if %>
    <% end_loop %>
    </div>
<% end_if %>

Code Sample Result