218 lines
9.3 KiB
HTML
218 lines
9.3 KiB
HTML
<div class="mp-showcase-specimens" aria-label="Card Types">
|
|
<div class="mp-showcase-specimen-row">
|
|
<div class="mp-showcase-specimen__card">
|
|
<p class="mp-showcase-specimen__label"><code>mp-card--stack</code> + <code>mp-card--link</code></p>
|
|
<a
|
|
class="mp-card mp-card--link mp-card--stack"
|
|
href="#"
|
|
aria-label="Stack with a link — example card"
|
|
>
|
|
<div class="mp-card__media" aria-hidden="true">
|
|
<img
|
|
class="mp-card__image"
|
|
src="{{assetPrefix}}assets/shared/placeholder.webp"
|
|
alt=""
|
|
width="560"
|
|
height="315"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<div class="mp-card__body">
|
|
<h3 class="mp-card__title">
|
|
Stack with a link
|
|
|
|
<span class="mp-card__ext" aria-hidden="true"></span></h3>
|
|
<ul class="mp-card__tags" aria-label="Project Type">
|
|
<li class="mp-card__tag">website</li>
|
|
</ul>
|
|
<p class="mp-card__desc">
|
|
A small script: drafts generated from keywords, without external APIs.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="mp-showcase-specimen__desc">
|
|
<p class="section__prose">
|
|
<strong>Stack with a link.</strong> Full-width preview, text at the bottom. For an external link:
|
|
<code>mp-card--link</code> and <code>mp-card__ext</code> in the title (as in the "Experience" block).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mp-showcase-specimen-row">
|
|
<div class="mp-showcase-specimen__card">
|
|
<p class="mp-showcase-specimen__label"><code>mp-card--stack</code> without a link</p>
|
|
<div class="mp-card mp-card--stack">
|
|
<div class="mp-card__media" aria-hidden="true">
|
|
<img
|
|
class="mp-card__image"
|
|
src="{{assetPrefix}}assets/shared/placeholder.webp"
|
|
alt=""
|
|
width="560"
|
|
height="315"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<div class="mp-card__body">
|
|
<h3 class="mp-card__title">Stack without a link</h3>
|
|
<ul class="mp-card__tags" aria-label="Project Type">
|
|
<li class="mp-card__tag">note</li>
|
|
</ul>
|
|
<p class="mp-card__desc">
|
|
A collection of databases and a rollup for a weekly overview, for personal use only.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mp-showcase-specimen__desc">
|
|
<p class="section__prose">
|
|
<strong>Stack without a link.</strong> Same view. Wrapper <code>div</code> or <code>article</code>, without
|
|
<code>mp-card--link</code>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mp-showcase-specimen-row">
|
|
<div class="mp-showcase-specimen__card">
|
|
<p class="mp-showcase-specimen__label"><code>mp-card--horizontal</code> + <code>mp-card--link</code></p>
|
|
<a
|
|
class="mp-card mp-card--link mp-card--horizontal"
|
|
href="#"
|
|
aria-label="Horizontal with a link — example card"
|
|
>
|
|
<div class="mp-card__media" aria-hidden="true">
|
|
<img
|
|
class="mp-card__image"
|
|
src="{{assetPrefix}}assets/shared/placeholder.webp"
|
|
alt=""
|
|
width="360"
|
|
height="203"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<div class="mp-card__body">
|
|
<h3 class="mp-card__title">
|
|
Horizontal with a link
|
|
|
|
<span class="mp-card__ext" aria-hidden="true"></span></h3>
|
|
<ul class="mp-card__tags" aria-label="Project Type">
|
|
<li class="mp-card__tag">app</li>
|
|
</ul>
|
|
<p class="mp-card__desc">
|
|
Local timer with short sounds and a feature to block unnecessary tabs.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="mp-showcase-specimen__desc">
|
|
<p class="section__prose">
|
|
<strong>Horizontal with a link.</strong> Thumbnail on the left, text on the right. On a narrow screen, the card
|
|
stacks vertically.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mp-showcase-specimen-row">
|
|
<div class="mp-showcase-specimen__card">
|
|
<p class="mp-showcase-specimen__label"><code>mp-card--horizontal</code> No link</p>
|
|
<div class="mp-card mp-card--horizontal">
|
|
<div class="mp-card__media" aria-hidden="true">
|
|
<img
|
|
class="mp-card__image"
|
|
src="{{assetPrefix}}assets/shared/placeholder.webp"
|
|
alt=""
|
|
width="360"
|
|
height="203"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<div class="mp-card__body">
|
|
<h3 class="mp-card__title">Horizontal without a link</h3>
|
|
<ul class="mp-card__tags" aria-label="Project Type">
|
|
<li class="mp-card__tag">Template</li>
|
|
</ul>
|
|
<p class="mp-card__desc">
|
|
Static website with a schedule and an application form on a separate service.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mp-showcase-specimen__desc">
|
|
<p class="section__prose">
|
|
<strong>Horizontal without a link.</strong> Same layout; the card does not link to an external URL.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mp-showcase-specimen-row">
|
|
<div class="mp-showcase-specimen__card">
|
|
<p class="mp-showcase-specimen__label"><code>mp-card--compact</code> + <code>mp-card--link</code></p>
|
|
<a
|
|
class="mp-card mp-card--link mp-card--compact"
|
|
href="#"
|
|
aria-label="Compact with a link — example card"
|
|
>
|
|
<div class="mp-card__body">
|
|
<h3 class="mp-card__title">
|
|
Compact with a link
|
|
|
|
<span class="mp-card__ext" aria-hidden="true"></span></h3>
|
|
<ul class="mp-card__tags" aria-label="Project Type">
|
|
<li class="mp-card__tag">script</li>
|
|
</ul>
|
|
<p class="mp-card__desc">
|
|
Prefixes, numbering, and a dry run before writing files to disk.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="mp-showcase-specimen__desc">
|
|
<p class="section__prose">
|
|
<strong>Compact with a link.</strong> Text only, no <code>mp-card__media</code>. In the grid, often with
|
|
<code>data-mp-cells="1"</code>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mp-showcase-specimen-row">
|
|
<div class="mp-showcase-specimen__card">
|
|
<p class="mp-showcase-specimen__label"><code>mp-card--compact</code> no link</p>
|
|
<article class="mp-card mp-card--compact">
|
|
<div class="mp-card__body">
|
|
<h3 class="mp-card__title">Compact without a link</h3>
|
|
<ul class="mp-card__tags" aria-label="Project Type">
|
|
<li class="mp-card__tag">document</li>
|
|
</ul>
|
|
<p class="mp-card__desc">
|
|
Markdown checklist before releasing minor UI changes.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="mp-showcase-specimen__desc">
|
|
<p class="section__prose">
|
|
<strong>Compact without a link.</strong> A short note or checklist without an external link.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mp-showcase-specimen-row">
|
|
<div class="mp-showcase-specimen__card">
|
|
<p class="mp-showcase-specimen__label"><code>mp-card--decor</code></p>
|
|
<div class="mp-card mp-card--decor" aria-hidden="true">
|
|
<span class="mp-card__decor-pattern" aria-hidden="true"></span>
|
|
</div>
|
|
</div>
|
|
<div class="mp-showcase-specimen__desc">
|
|
<p class="section__prose">
|
|
<strong>Decorative cell.</strong> A placeholder in the grid, with no project or link. Inside
|
|
<code>span.mp-card__decor-pattern</code>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|