<neo-card>
  <div data-neo-card-inner>
    <h3 data-neo-card-title>Default</h3>
    <p data-neo-card-description>Filled background, subtle border.</p>
  </div>
</neo-card>
<neo-card variant="outline">
  <div data-neo-card-inner>
    <h3 data-neo-card-title>Outline</h3>
    <p data-neo-card-description>Border only, no fill.</p>
  </div>
</neo-card>
<neo-card variant="elevated">
  <div data-neo-card-inner>
    <h3 data-neo-card-title>Elevated</h3>
    <p data-neo-card-description>Soft shadow, no border.</p>
  </div>
</neo-card>

package examples

import "github.com/romshark/morpheus/neo"

templ CardVariants() {
	@neo.Card(neo.CardOpts{}) {
		@neo.CardTitle() {
			Default
		}
		@neo.CardDescription() {
			Filled background, subtle border.
		}
	}
	@neo.Card(neo.CardOpts{Variant: neo.Set(neo.CardVariantOutline)}) {
		@neo.CardTitle() {
			Outline
		}
		@neo.CardDescription() {
			Border only, no fill.
		}
	}
	@neo.Card(neo.CardOpts{Variant: neo.Set(neo.CardVariantElevated)}) {
		@neo.CardTitle() {
			Elevated
		}
		@neo.CardDescription() {
			Soft shadow, no border.
		}
	}
}

<neo-card variant="elevated">
  <div data-neo-card-inner>
    <div data-neo-card-header>
      <h3 data-neo-card-title>Production deploy</h3>
      <p data-neo-card-description>Promotes the latest green build from staging.</p>
      <div data-neo-card-actions>
        <neo-button role="button" variant="ghost" tabindex="0">Logs</neo-button>
      </div>
    </div>
    <div data-neo-card-body>Last deployed 14 minutes ago by you. 23 commits since the previous release. Review the changelog before shipping.</div>
    <div data-neo-card-footer>
      <neo-button role="button" tabindex="0">Cancel</neo-button>
      <neo-button role="button" variant="primary" tabindex="0">Deploy</neo-button>
    </div>
  </div>
</neo-card>

package examples

import "github.com/romshark/morpheus/neo"

templ CardComposed() {
	@neo.Card(neo.CardOpts{Variant: neo.Set(neo.CardVariantElevated)}) {
		@neo.CardHeader() {
			@neo.CardTitle() {
				Production deploy
			}
			@neo.CardDescription() {
				Promotes the latest green build from staging.
			}
			@neo.CardActions() {
				@neo.Button(neo.ButtonOpts{Variant: neo.Set(neo.ButtonVariantGhost)}) {
					Logs
				}
			}
		}
		@neo.CardBody() {
			Last deployed 14 minutes ago by you. 23
			commits since the previous release.
			Review the changelog before shipping.
		}
		@neo.CardFooter() {
			@neo.Button(neo.ButtonOpts{}) {
				Cancel
			}
			@neo.Button(neo.ButtonOpts{Variant: neo.Set(neo.ButtonVariantPrimary)}) {
				Deploy
			}
		}
	}
}

<neo-card variant="elevated">
  <div data-neo-card-inner>
    <div data-neo-card-media>
      <img
        src="https://collectionapi.metmuseum.org/api/collection/v1/iiif/15444/38888/restricted"
        alt="Bay of Uri, Brunnen, by John Singer Sargent, June 4, 1870"
      >
    </div>
    <div data-neo-card-header>
      <h3 data-neo-card-title>Bay of Uri, Brunnen<br><sub>from Switzerland 1870 Sketchbook</sub></h3>
      <p data-neo-card-description>John Singer Sargent</p>
      <p data-neo-card-description>American · June 4, 1870</p>
    </div>
    <div data-neo-card-footer class="card-media-hero-footer">
      <a
        class="card-pg-link"
        href="https://www.metmuseum.org/art/collection/search/15444"
      >See source →</a>
    </div>
  </div>
</neo-card>

package examples

import "github.com/romshark/morpheus/neo"

templ CardMediaHero() {
	@neo.Card(neo.CardOpts{Variant: neo.Set(neo.CardVariantElevated)}) {
		@neo.CardMedia() {
			<img
				src="https://collectionapi.metmuseum.org/api/collection/v1/iiif/15444/38888/restricted"
				alt="Bay of Uri, Brunnen, by John Singer Sargent, June 4, 1870"
			/>
		}
		@neo.CardHeader() {
			@neo.CardTitle() {
				Bay of Uri, Brunnen
				<br/>
				<sub>from Switzerland 1870 Sketchbook</sub>
			}
			@neo.CardDescription() {
				John Singer Sargent
			}
			@neo.CardDescription() {
				American · June 4, 1870
			}
		}
		@neo.CardFooterAttrs(templ.Attributes{"class": "card-media-hero-footer"}) {
			<a class="card-pg-link" href="https://www.metmuseum.org/art/collection/search/15444">
				See source →
			</a>
		}
	}
}

.card-media-hero-footer {
	justify-content: flex-start;
}

.card-pg-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--accent, currentColor);
	font-weight: 600;
	text-decoration: none;
}

.card-pg-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.card-pg-link:focus-visible {
	outline: 2px solid var(--accent, currentColor);
	outline-offset: 2px;
	border-radius: 0.2rem;
}

<neo-card variant="elevated" orientation="horizontal">
  <div data-neo-card-inner>
    <div data-neo-card-media>
      <img
        src="https://collectionapi.metmuseum.org/api/collection/v1/iiif/500938/1020113/main-image"
        alt="Torban, 19th century, Ukrainian"
      >
    </div>
    <div data-neo-card-body>
      <table class="card-pg-spec">
        <tbody>
          <tr><th scope="row">Title</th><td>Torban</td></tr>
          <tr><th scope="row">Date</th><td>19th century</td></tr>
          <tr><th scope="row">Geography</th><td>Ukraine</td></tr>
          <tr><th scope="row">Culture</th><td>Ukrainian</td></tr>
          <tr><th scope="row">Medium</th><td>Wood and wire</td></tr>
          <tr>
            <th scope="row">Dimensions</th>
            <td>Length 118.1 cm, Width 36.8 cm, Height 17 cm</td>
          </tr>
          <tr>
            <th scope="row">Classification</th>
            <td>Chordophone-Lute-plucked</td>
          </tr>
          <tr>
            <th scope="row">Credit Line</th>
            <td>The Crosby Brown Collection of Musical Instruments, 1889</td>
          </tr>
          <tr><th scope="row">Object Number</th><td>89.4.310</td></tr>
        </tbody>
      </table>
    </div>
    <div data-neo-card-footer class="card-horizontal-footer">
      <a
        class="card-pg-link"
        href="https://www.metmuseum.org/art/collection/search/500938"
      >See source →</a>
    </div>
  </div>
</neo-card>

package examples

import "github.com/romshark/morpheus/neo"

templ CardHorizontal() {
	@neo.Card(neo.CardOpts{Variant: neo.Set(neo.CardVariantElevated), Orientation: neo.Set(neo.AxisHorizontal)}) {
		@neo.CardMedia() {
			<img
				src="https://collectionapi.metmuseum.org/api/collection/v1/iiif/500938/1020113/main-image"
				alt="Torban, 19th century, Ukrainian"
			/>
		}
		@neo.CardBody() {
			<table class="card-pg-spec">
				<tbody>
					<tr><th scope="row">Title</th><td>Torban</td></tr>
					<tr><th scope="row">Date</th><td>19th century</td></tr>
					<tr><th scope="row">Geography</th><td>Ukraine</td></tr>
					<tr><th scope="row">Culture</th><td>Ukrainian</td></tr>
					<tr><th scope="row">Medium</th><td>Wood and wire</td></tr>
					<tr><th scope="row">Dimensions</th><td>Length 118.1 cm, Width 36.8 cm, Height 17 cm</td></tr>
					<tr><th scope="row">Classification</th><td>Chordophone-Lute-plucked</td></tr>
					<tr><th scope="row">Credit Line</th><td>The Crosby Brown Collection of Musical Instruments, 1889</td></tr>
					<tr><th scope="row">Object Number</th><td>89.4.310</td></tr>
				</tbody>
			</table>
		}
		@neo.CardFooterAttrs(templ.Attributes{"class": "card-horizontal-footer"}) {
			<a class="card-pg-link" href="https://www.metmuseum.org/art/collection/search/500938">
				See source →
			</a>
		}
	}
}

.card-pg-spec {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.card-pg-spec th,
.card-pg-spec td {
	padding: 0.3rem 0.25rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid color-mix(in srgb, var(--page-fg) 8%, transparent);
}

.card-pg-spec tr:last-child > * {
	border-bottom: 0;
}

.card-pg-spec th {
	font-weight: 600;
	white-space: nowrap;
	width: 1%;
	color: color-mix(in srgb, var(--page-fg) 70%, transparent);
}

.card-pg-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--accent, currentColor);
	font-weight: 600;
	text-decoration: none;
}

.card-pg-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.card-pg-link:focus-visible {
	outline: 2px solid var(--accent, currentColor);
	outline-offset: 2px;
	border-radius: 0.2rem;
}

.card-horizontal-footer {
	justify-content: flex-start;
}

<neo-card variant="elevated" orientation="horizontal">
  <div data-neo-card-inner>
    <div data-neo-card-media>
      <video
        controls
        preload="metadata"
        src="https://media.w3.org/2010/05/sintel/trailer.mp4"
      ></video>
    </div>
    <div data-neo-card-header>
      <h3 data-neo-card-title>Sintel</h3>
      <p data-neo-card-description>Blender Open Movie · 2010</p>
    </div>
    <div data-neo-card-body>A short fantasy film by the Blender Foundation, released under Creative Commons BY 3.0. Drag the resize handle on this stage below 28rem to watch the card auto-collapse into a vertical stack, with no viewport reload, no JavaScript, no @media query.</div>
    <div data-neo-card-footer class="card-adaptive-footer">
      <a
        class="card-pg-link"
        target="_blank"
        href="https://durian.blender.org/"
      >See source →</a>
    </div>
  </div>
</neo-card>

package examples

import "github.com/romshark/morpheus/neo"

templ CardAdaptive() {
	@neo.Card(neo.CardOpts{Variant: neo.Set(neo.CardVariantElevated), Orientation: neo.Set(neo.AxisHorizontal)}) {
		@neo.CardMedia() {
			<video
				controls
				preload="metadata"
				src="https://media.w3.org/2010/05/sintel/trailer.mp4"
			></video>
		}
		@neo.CardHeader() {
			@neo.CardTitle() {
				Sintel
			}
			@neo.CardDescription() {
				Blender Open Movie · 2010
			}
		}
		@neo.CardBody() {
			A short fantasy film by the Blender Foundation, released under
			Creative Commons BY 3.0. Drag the resize handle on this stage
			below 28rem to watch the card auto-collapse into a vertical
			stack, with no viewport reload, no JavaScript, no @media query.
		}
		@neo.CardFooterAttrs(templ.Attributes{"class": "card-adaptive-footer"}) {
			<a class="card-pg-link" target="_blank" href="https://durian.blender.org/">
				See source →
			</a>
		}
	}
}

.card-pg-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--accent, currentColor);
	font-weight: 600;
	text-decoration: none;
}

.card-pg-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.card-pg-link:focus-visible {
	outline: 2px solid var(--accent, currentColor);
	outline-offset: 2px;
	border-radius: 0.2rem;
}

.card-adaptive-footer {
	justify-content: flex-start;
}