Add horizontal orientation to <wa-card> (#874)

* started horizontal card logic * a little more work * remove SSR attributes These are no longer used since we're not serving up an SSR version of the website anymore. * more work * looking for old code * added actions slot to horizontal card * troubleshooting linter issue * fixed liniting error * responded to feedback * added jsDoc and updated example --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
2026-01-11 20:08:56 +00:00 · 2025-09-10 10:27:15 -05:00
parent 75116a5b0c
commit 04497cfd13
4 changed files with 97 additions and 19 deletions
--- a/packages/webawesome/docs/docs/components/card.md
+++ b/packages/webawesome/docs/docs/components/card.md
@@ -17,10 +17,8 @@ category: Organization
  This kitten is as cute as he is playful. Bring him home today!<br />
  <small class="wa-caption-m">6 weeks old</small>

-  <div slot="footer" class="wa-split">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating label="Rating"></wa-rating>
-  </div>
+  <wa-button slot="footer" variant="brand" pill>More Info</wa-button>
+  <wa-rating slot="footer-actions" label="Rating"></wa-rating>
 </wa-card>

 <style>
@@ -55,14 +53,11 @@ If using SSR, you need to also use the `with-header` attribute to add a header t

 ```html {.example}
 <wa-card class="card-header">
-  <div slot="header" class="wa-split">
-    Header Title
-    <wa-button appearance="plain">
-      <wa-icon name="gear" variant="solid" label="Settings"></wa-icon>
-    </wa-button>
-  </div>
-
+  <h3 slot="header">Header Title</h3>
  This card has a header. You can put all sorts of things in it!
+  <wa-button appearance="plain" slot="header-actions">
+    <wa-icon name="gear" variant="solid" label="Settings"></wa-icon>
+  </wa-button>
 </wa-card>

 <style>
@@ -85,10 +80,9 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
 <wa-card class="card-footer">
  This card has a footer. You can put all sorts of things in it!

-  <div slot="footer" class="wa-split">
-    <wa-rating></wa-rating>
-    <wa-button variant="brand">Preview</wa-button>
-  </div>
+  <wa-rating slot="footer"></wa-rating>
+
+  <wa-button slot="footer-actions" variant="brand">Preview</wa-button>
 </wa-card>

 <style>
@@ -155,3 +149,35 @@ Use the `appearance` attribute to change the card's visual appearance.
  {%- endfor %}
 </div>
 ```
+
+### Orientation
+
+Set the `orientation` attribute to `horizontal` to create a card with a horizontal, side-by-side layout. Make sure to set a width or maximum width for the media slot. Horizontal cards do not currently contain the header and footer slots.
+<wa-callout>
+<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+The `actions` slot is only available for the horizontal orientation
+</wa-callout>
+
+```html {.example}
+<div class="wa-grid">
+  <wa-card orientation="horizontal" class="horizontal-card">
+    <img
+      slot="media"
+      src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+      alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+    />
+    This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+    <wa-button slot="actions" variant="neutral" appearance="plain"
+      ><wa-icon name="ellipsis" label="actions"></wa-icon
+    ></wa-button>
+  </wa-card>
+</div>
+
+<style>
+  .horizontal-card {
+    img[slot='media'] {
+      max-width: 300px;
+    }
+  }
+</style>
+```
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -37,6 +37,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-color-picker>` that prevent the picker from staying in the viewport
 - Fixed a bug that in `<wa-icon>` that caused `library`, `family`, `variant` and `name` to not reflect [pr:#1395]
 - Fixed a bug in `<wa-format-date>` and `<wa-relative-time>` that caused spaces to appear before and after the output [#1417]
+- Added horizontal orientation support with `orientation="horizontal"` for `<wa-card>`

 ## 3.0.0-beta.4

--- a/packages/webawesome/src/components/card/card.css
+++ b/packages/webawesome/src/components/card/card.css
@@ -77,7 +77,9 @@
 }

 .header {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
  border-block-end-style: inherit;
  border-block-end-color: var(--wa-color-surface-border);
  border-block-end-width: var(--wa-panel-border-width);
@@ -90,7 +92,9 @@
 }

 .footer {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
  border-block-start-style: inherit;
  border-block-start-color: var(--wa-color-surface-border);
  border-block-start-width: var(--wa-panel-border-width);
@@ -102,3 +106,27 @@
 :host(:not([with-media])) .media {
  display: none;
 }
+
+/* Orientation Styles */
+:host([orientation='horizontal']) {
+  flex-direction: row;
+
+  .media {
+    border-start-start-radius: var(--inner-border-radius);
+    border-end-start-radius: var(--inner-border-radius);
+    border-start-end-radius: 0;
+    object-fit: cover;
+  }
+}
+
+:host([orientation='horizontal']) ::slotted([slot='body']) {
+  display: block;
+  height: 100%;
+  margin: 0;
+}
+
+:host([orientation='horizontal']) ::slotted([slot='actions']) {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing);
+}
--- a/packages/webawesome/src/components/card/card.ts
+++ b/packages/webawesome/src/components/card/card.ts
@@ -15,6 +15,9 @@ import styles from './card.css';
 * @slot header - An optional header for the card.
 * @slot footer - An optional footer for the card.
 * @slot media - An optional media section to render at the start of the card.
+ * @slot actions - An optional actions section to render at the end for the horizontal card.
+ * @slot header-actions - An optional actions section to render in the header of the vertical card.
+ * @slot footer-actions - An optional actions section to render in the footer of the vertical card.
 *
 * @csspart media - The container that wraps the card's media.
 * @csspart header - The container that wraps the card's header.
@@ -42,6 +45,10 @@ export default class WaCard extends WebAwesomeElement {
  /** Renders the card with a footer. Only needed for SSR, otherwise is automatically added. */
  @property({ attribute: 'with-footer', type: Boolean, reflect: true }) withFooter = false;

+  /** Renders the card's orientation **/
+  @property({ reflect: true })
+  orientation: 'horizontal' | 'vertical' = 'vertical';
+
  updated() {
    // Enable the respective slots when detected
    if (!this.withHeader && this.hasSlotController.test('header')) this.withHeader = true;
@@ -50,11 +57,27 @@ export default class WaCard extends WebAwesomeElement {
  }

  render() {
+    // Horizontal Orientation
+    if (this.orientation === 'horizontal') {
+      return html`
+        <slot name="media" part="media" class="media"></slot>
+        <slot part="body" class="body"></slot>
+        <slot name="actions" part="actions" class="actions"></slot>
+      `;
+    }
+
+    // Vertical Orientation
    return html`
      <slot name="media" part="media" class="media"></slot>
-      <slot name="header" part="header" class="header"></slot>
+      <header part="header" class="header">
+        <slot name="header"></slot>
+        <slot name="header-actions"></slot>
+      </header>
      <slot part="body" class="body"></slot>
-      <slot name="footer" part="footer" class="footer"></slot>
+      <footer part="footer" class="footer">
+        <slot name="footer"></slot>
+        <slot name="footer-actions"></slot>
+      </footer>
    `;
  }
 }