Skip to content

Commit

Permalink
fix(card): vertical alignment of footer (#1315)
Browse files Browse the repository at this point in the history
  • Loading branch information
bennypowers authored Nov 8, 2023
1 parent a4e75f6 commit 4f6ff65
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 3 deletions.
4 changes: 4 additions & 0 deletions .changeset/card-footer-layout.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
"@rhds/elements": patch
---
`<rh-card>`: ensure footer is always on the bottom of the card
47 changes: 47 additions & 0 deletions elements/rh-card/demo/grid.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<div id="card-grid">
<rh-card>
<h2 slot="header">Grid Card</h2>
<p>In a grid, cards will fill all the available vertical space.</p>
<rh-cta priority="primary" slot="footer">
<a href="#">Call to action</a>
</rh-cta>
</rh-card>

<rh-card>
<h2 slot="header">Grid Card with More Content</h2>
<p>
In such a case, all of the grid card's footers should be
vertically aligned. Meaning, they should always rest in
the bottom of their card. Even when one card has much more
content than its neighbour, and thus fill more vertical space
in it's body, the footers should still be aligned.
</p>
<rh-cta priority="primary" slot="footer">
<a href="#">Call to action</a>
</rh-cta>
</rh-card>

<rh-card>
<h2 slot="header">Grid Card</h2>
<p>
These kinds of situations should best be avoided. See the
guidelines for more information.
</p>
<rh-cta priority="primary" slot="footer">
<a href="https://ux.redhat.com/elements/card/guidelines/#vertical-height">Read the Guidelines</a>
</rh-cta>
</rh-card>
</div>

<script type="module">
import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-card/rh-card.js';
</script>

<style>
#card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--rh-space-lg, 16px);
}
</style>
4 changes: 2 additions & 2 deletions elements/rh-card/demo/rh-card.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<rh-card>
<h2>Headline, sm</h2>
<h2 slot="header">Card</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas, a sollicitudin mauris
tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
<rh-cta priority="primary" slot="footer">
<rh-cta slot="footer" priority="primary">
<a href="#">Call to action</a>
</rh-cta>
</rh-card>
Expand Down
2 changes: 1 addition & 1 deletion elements/rh-card/rh-card.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ article {
display: flex;
gap: 0.5em;
inset-block-end: 0;
margin-block-start: auto;
}

.empty {
Expand All @@ -43,7 +44,6 @@ article {
font-size: inherit !important;
}


#container {
align-self: stretch;
display: flex;
Expand Down

0 comments on commit 4f6ff65

Please sign in to comment.