diff --git a/resources/styles/molecules/card/index.scss b/resources/styles/molecules/card/index.scss index 5aa0ccd..8d1d0fc 100644 --- a/resources/styles/molecules/card/index.scss +++ b/resources/styles/molecules/card/index.scss @@ -31,7 +31,7 @@ } &__cta { - margin-top: 0; + margin-top: auto; display: flex; width: 100%; font-weight: 700; @@ -68,7 +68,7 @@ &__description { color: var(--color-gray-600); - line-height: 2; + line-height: 1.5; margin: 0; } @@ -78,6 +78,7 @@ align-items: flex-start; padding: 1.5rem; gap: 1rem; + height: 100%; } &__iconWrapper { diff --git a/resources/styles/organisms/cards/cards--centered.html b/resources/styles/organisms/cards/cards--centered.html new file mode 100644 index 0000000..9041f6b --- /dev/null +++ b/resources/styles/organisms/cards/cards--centered.html @@ -0,0 +1,487 @@ +

Cards - Centered Orphans

+

The -centered modifier uses a doubled grid column count with nth-child positioning to center orphan cards in the last row.

+ +
+

4 Cards (-centered) - 3 + 1 layout

+

4 cards in a 3-column layout: first row full, single orphan centered below.

+
+
+
+ Card One +

Row 1 of 3 cards.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Two +

Row 1 of 3 cards.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Three +

Row 1 of 3 cards.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Four +

Centered orphan (1 of 1).

+ + Learn More + + + + +
+
+ +
+
+
+
+ +
+

5 Cards (-centered) - 3 + 2 layout

+

5 cards in a 3-column layout: first row full, 2 orphans centered below.

+
+
+
+ Card One +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Two +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Three +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Four +

Centered orphan (1 of 2).

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Five +

Centered orphan (2 of 2).

+ + Learn More + + + + +
+
+ +
+
+
+
+ +
+

6 Cards (-columns-4 -centered) - 4 + 2 layout

+

6 cards in a 4-column layout: first row full, 2 orphans centered below.

+
+
+
+ Card One +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Two +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Three +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Four +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Five +

Centered orphan (1 of 2).

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Six +

Centered orphan (2 of 2).

+ + Learn More + + + + +
+
+ +
+
+
+
+ +
+

7 Cards (-columns-4 -centered) - 4 + 3 layout

+

7 cards in a 4-column layout: first row full, 3 orphans centered below.

+
+
+
+ Card One +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Two +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Three +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Four +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Five +

Centered orphan (1 of 3).

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Six +

Centered orphan (2 of 3).

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Seven +

Centered orphan (3 of 3).

+ + Learn More + + + + +
+
+ +
+
+
+
+ +
+

8 Cards (-columns-5 -centered) - 5 + 3 layout

+

8 cards in a 5-column layout: first row full, 3 orphans centered below.

+
+
+
+ Card One +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Two +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Three +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Four +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Five +

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Six +

Centered orphan (1 of 3).

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Seven +

Centered orphan (2 of 3).

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Seven +

Centered orphan (3 of 3).

+ + Learn More + + + + +
+
+ +
+
+
+
diff --git a/resources/styles/organisms/cards/cards.html b/resources/styles/organisms/cards/cards.html new file mode 100644 index 0000000..833e6d4 --- /dev/null +++ b/resources/styles/organisms/cards/cards.html @@ -0,0 +1,406 @@ +

Cards Grid

+

The .cards component displays a collection of card molecules in a responsive grid layout. Mobile: 1 column, Tablet & Desktop: 2 columns by default (configurable with .-columns-N modifiers)

+ +
+

Default Grid (2 columns on tablet & desktop)

+
+
+
+ Card Title One +

+ Without a count modifier, cards default to 2 columns on tablet and desktop. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Title Two +

+ Without a count modifier, cards default to 2 columns on tablet and desktop. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ +
+

Two Columns (.-columns-2)

+
+
+
+ First Card +

+ Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Second Card +

+ Aenean ac porta nisl. Ut eu bibendum nisi. Vestibulum et consectetur arcu. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ +
+

Three Columns (.-columns-3) - 6 cards shown

+
+
+
+ Card One +

+ 3 columns on desktop. Extra cards flow to next row. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Two +

+ 3 columns on desktop. Extra cards flow to next row. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Three +

+ 3 columns on desktop. Extra cards flow to next row. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Four +

+ 3 columns on desktop. Extra cards flow to next row. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Five +

+ 3 columns on desktop. Extra cards flow to next row. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Six +

+ 3 columns on desktop. Extra cards flow to next row. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ +
+

Four Columns (.-columns-4) - 7 cards shown

+
+
+
+ Card One +

+ 4 columns on desktop. Orphan cards align left. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Two +

+ 4 columns on desktop. Orphan cards align left. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Three +

+ 4 columns on desktop. Orphan cards align left. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Four +

+ 4 columns on desktop. Orphan cards align left. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Five +

+ 4 columns on desktop. Orphan cards align left. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Six +

+ 4 columns on desktop. Orphan cards align left. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Seven +

+ This orphan card stays its natural width, aligned left. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ +
+

Five Columns (.-columns-5)

+
+
+
+ Card One +

+ Five equal-width cards in a row on desktop. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Two +

+ Five equal-width cards in a row on desktop. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Three +

+ Five equal-width cards in a row on desktop. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Four +

+ Five equal-width cards in a row on desktop. +

+ + Learn More + + + + +
+
+ +
+
+
+
+ Card Five +

+ Five equal-width cards in a row on desktop. +

+ + Learn More + + + + +
+
+ +
+
+
+
diff --git a/resources/styles/organisms/cards/index.scss b/resources/styles/organisms/cards/index.scss new file mode 100644 index 0000000..41c1b3c --- /dev/null +++ b/resources/styles/organisms/cards/index.scss @@ -0,0 +1,149 @@ +@use "@imarc/pronto/resources/styles/imported" as *; + +.cards { + $b: &; + + --columns: 1; + --gap: var(--root-gap, 16px); + + display: grid; + gap: var(--gap); + grid-template-columns: repeat(var(--columns), 1fr); + + // Responsive defaults: 1 mobile, 2 tablet+ + @include at(md) { + --columns: 2; + } + + // Column modifiers (2-5 columns on tablet+) + @for $i from 2 through 5 { + &.-columns-#{$i} { + @include at(md) { + --columns: #{$i}; + } + } + } + + + // Center orphan cards using doubled grid columns + // Cards span 2 columns, orphans positioned to center + &.-centered { + > .card { + grid-column: span 2; + } + + // 3 visual columns = 6 grid columns (default for -centered) + @include at(md) { + grid-template-columns: repeat(6, 1fr); + + // 4 cards (3 + 1): center the orphan + > .card:nth-child(4):nth-last-child(1) { + grid-column: 3 / 5; + } + + // 5 cards (3 + 2): center the 2 orphans + > .card:nth-child(4):nth-last-child(2) { + grid-column: 2 / 4; + } + > .card:nth-child(5):nth-last-child(1) { + grid-column: 4 / 6; + } + } + + // 4 visual columns = 8 grid columns + &.-columns-4 { + @include at(md) { + grid-template-columns: repeat(8, 1fr); + + // Reset 3-column orphan positioning + > .card:nth-child(4):nth-last-child(1), + > .card:nth-child(4):nth-last-child(2), + > .card:nth-child(5):nth-last-child(1) { + grid-column: span 2; + } + + // 5 cards (4 + 1): center the orphan + > .card:nth-child(5):nth-last-child(1) { + grid-column: 4 / 6; + } + + // 6 cards (4 + 2): center the 2 orphans + > .card:nth-child(5):nth-last-child(2) { + grid-column: 3 / 5; + } + > .card:nth-child(6):nth-last-child(1) { + grid-column: 5 / 7; + } + + // 7 cards (4 + 3): center the 3 orphans + > .card:nth-child(5):nth-last-child(3) { + grid-column: 2 / 4; + } + > .card:nth-child(6):nth-last-child(2) { + grid-column: 4 / 6; + } + > .card:nth-child(7):nth-last-child(1) { + grid-column: 6 / 8; + } + } + } + + // 5 visual columns = 10 grid columns + &.-columns-5 { + @include at(md) { + grid-template-columns: repeat(10, 1fr); + + // Reset previous orphan positioning + > .card:nth-child(4):nth-last-child(1), + > .card:nth-child(4):nth-last-child(2), + > .card:nth-child(5):nth-last-child(1), + > .card:nth-child(5):nth-last-child(2), + > .card:nth-child(5):nth-last-child(3), + > .card:nth-child(6):nth-last-child(1), + > .card:nth-child(6):nth-last-child(2), + > .card:nth-child(7):nth-last-child(1) { + grid-column: span 2; + } + + // 6 cards (5 + 1): center the orphan + > .card:nth-child(6):nth-last-child(1) { + grid-column: 5 / 7; + } + + // 7 cards (5 + 2): center the 2 orphans + > .card:nth-child(6):nth-last-child(2) { + grid-column: 4 / 6; + } + > .card:nth-child(7):nth-last-child(1) { + grid-column: 6 / 8; + } + + // 8 cards (5 + 3): center the 3 orphans + > .card:nth-child(6):nth-last-child(3) { + grid-column: 3 / 5; + } + > .card:nth-child(7):nth-last-child(2) { + grid-column: 5 / 7; + } + > .card:nth-child(8):nth-last-child(1) { + grid-column: 7 / 9; + } + + // 9 cards (5 + 4): center the 4 orphans + > .card:nth-child(6):nth-last-child(4) { + grid-column: 2 / 4; + } + > .card:nth-child(7):nth-last-child(3) { + grid-column: 4 / 6; + } + > .card:nth-child(8):nth-last-child(2) { + grid-column: 6 / 8; + } + > .card:nth-child(9):nth-last-child(1) { + grid-column: 8 / 10; + } + } + } + } +} + diff --git a/resources/styles/organisms/index.scss b/resources/styles/organisms/index.scss index 90d60f0..5fda860 100644 --- a/resources/styles/organisms/index.scss +++ b/resources/styles/organisms/index.scss @@ -1,5 +1,6 @@ @forward "basicSection"; @forward "callout"; +@forward "cards"; @forward "dialog"; @forward "hero"; @forward "message";