Skip to content

Commit

Permalink
docs(card): image card demo headers
Browse files Browse the repository at this point in the history
  • Loading branch information
@wesleyboar
wesleyboar committed Oct 31, 2024
1 parent 03047f8 commit f2fa289
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 25 deletions.
2 changes: 1 addition & 1 deletion src/lib/_imports/components/c-card/_c-card--image.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@

{{else}}

<h3>Card - Image {{position}}</h3>
<h3 id="card-image-{{position}}">Card - Image {{position}}</h3>
<p>{{> @text-of-one-paragraph-short }}</p>
{{#if tall}}
{{> @message tag="p" type="warning" scope="inline" content="Narrow images might not fill space available. Just use a wider image." }}
Expand Down
48 changes: 24 additions & 24 deletions src/lib/_imports/components/c-card/c-card--images.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,41 +10,41 @@

<h2 id="section--null">Section (Default a.k.a Unstyled a.k.a Transparent)</h2>
<section class="o-section">
<h3>Transparent Card Image</h3>
<h3 id="card-image-transparent-default">Transparent Card Image</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="transparent" }}
{{> @c-card--image position="bottom" wide=true variant="transparent" }}
{{> @c-card--image position="right" tall=true variant="transparent" }}
{{> @c-card--image position="left" tall=true variant="transparent" }}
</section>
<h3>Transparent Card Image with Link</h3>
<h3 id="card-image-transparent-default-link">Transparent Card Image with Link</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
{{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
{{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
{{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
</section>
<h3>Contact Card with Image - Transparent</h3>
<h3 id="card-image-transparent-default-contact">Contact Card with Image - Transparent</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
</section>

<h3>Plain Card Image</h3>
<h3 id="card-image-plain-default">Plain Card Image</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="plain" }}
{{> @c-card--image position="bottom" wide=true variant="plain" }}
{{> @c-card--image position="right" tall=true variant="plain" }}
{{> @c-card--image position="left" tall=true variant="plain" }}
</section>
<h3>Plain Card Image with Link</h3>
<h3 id="card-image-plain-default-link">Plain Card Image with Link</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
{{> @c-card--image position="bottom" wide=true variant="plain" image-link="#"}}
{{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
{{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
</section>
<h3>Contact Card with Image - Plain</h3>
<h3 id="card-image-plain-default-contact">Contact Card with Image - Plain</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
Expand All @@ -53,41 +53,41 @@
<hr>
<h2 id="section--light">Section - Light</h2>
<section class="o-section o-section--style-light">
<h3>Transparent Card Image</h3>
<h3 id="card-image-transparent-light">Transparent Card Image</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="transparent" }}
{{> @c-card--image position="bottom" wide=true variant="transparent" }}
{{> @c-card--image position="right" tall=true variant="transparent" }}
{{> @c-card--image position="left" tall=true variant="transparent" }}
</section>
<h3>Transparent Card Image with Link</h3>
<h3 id="card-image-transparent-light-link">Transparent Card Image with Link</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
{{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
{{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
{{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
</section>
<h3>Contact Card with Image - Transparent</h3>
<h3 id="card-image-transparent-light-contact">Contact Card with Image - Transparent</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
</section>

<h3>Plain Card Image</h3>
<h3 id="card-image-plain-light">Plain Card Image</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="plain" }}
{{> @c-card--image position="bottom" wide=true variant="plain" }}
{{> @c-card--image position="right" tall=true variant="plain" }}
{{> @c-card--image position="left" tall=true variant="plain" }}
</section>
<h3>Plain Card Image with Link</h3>
<h3 id="card-image-plain-light-link">Plain Card Image with Link</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
{{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
{{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
{{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
</section>
<h3>Contact Card with Image - Plain</h3>
<h3 id="card-image-plain-light-contact">Contact Card with Image - Plain</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
Expand All @@ -96,41 +96,41 @@
<hr>
<h2 id="section--muted">Section - Muted</h2>
<section class="o-section o-section--style-muted">
<h3>Transparent Card Image</h3>
<h3 id="card-image-transparent-muted">Transparent Card Image</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="transparent" }}
{{> @c-card--image position="bottom" wide=true variant="transparent" }}
{{> @c-card--image position="right" tall=true variant="transparent" }}
{{> @c-card--image position="left" tall=true variant="transparent" }}
</section>
<h3>Transparent Card Image with Link</h3>
<h3 id="card-image-transparent-muted-link">Transparent Card Image with Link</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
{{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
{{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
{{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
</section>
<h3>Contact Card with Image - Transparent</h3>
<h3 id="card-image-transparent-muted-contact">Contact Card with Image - Transparent</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
</section>

<h3>Plain Card Image</h3>
<h3 id="card-image-plain-muted">Plain Card Image</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="plain" }}
{{> @c-card--image position="bottom" wide=true variant="plain" }}
{{> @c-card--image position="right" tall=true variant="plain" }}
{{> @c-card--image position="left" tall=true variant="plain" }}
</section>
<h3>Plain Card Image with Link</h3>
<h3 id="card-image-plain-muted-link">Plain Card Image with Link</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
{{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
{{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
{{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
</section>
<h3>Contact Card with Image - Plain</h3>
<h3 id="card-image-plain-muted-contact">Contact Card with Image - Plain</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
Expand All @@ -139,41 +139,41 @@
<hr>
<h2 id="section--dark">Section - Dark</h2>
<section class="o-section o-section--style-dark">
<h3>Transparent Card Image</h3>
<h3 id="card-image-transparent-dark">Transparent Card Image</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="transparent" }}
{{> @c-card--image position="bottom" wide=true variant="transparent" }}
{{> @c-card--image position="right" tall=true variant="transparent" }}
{{> @c-card--image position="left" tall=true variant="transparent" }}
</section>
<h3>Transparent Card Image with Link</h3>
<h3 id="card-image-transparent-dark-link">Transparent Card Image with Link</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
{{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
{{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
{{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
</section>
<h3>Contact Card with Image - Transparent</h3>
<h3 id="card-image-transparent-dark-contact">Contact Card with Image - Transparent</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
</section>

<h3>Plain Card Image</h3>
<h3 id="card-image-plain-dark">Plain Card Image</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="plain" }}
{{> @c-card--image position="bottom" wide=true variant="plain" }}
{{> @c-card--image position="right" tall=true variant="plain" }}
{{> @c-card--image position="left" tall=true variant="plain" }}
</section>
<h3>Plain Card Image with Link</h3>
<h3 id="card-image-plain-dark-link">Plain Card Image with Link</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
{{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
{{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
{{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
</section>
<h3>Contact Card with Image - Plain</h3>
<h3 id="card-image-plain-dark-contact">Contact Card with Image - Plain</h3>
<section class="o-section s-image-grid">
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
Expand Down

0 comments on commit f2fa289

Please sign in to comment.