diff --git a/component-library/components/cards/cards.bookshop.yml b/component-library/components/cards/cards.bookshop.yml index 69fc20d..4534265 100644 --- a/component-library/components/cards/cards.bookshop.yml +++ b/component-library/components/cards/cards.bookshop.yml @@ -44,6 +44,7 @@ blueprint: icon: force: orientation: + layout: class: width: justify: start diff --git a/component-library/components/cards/cards.hugo.html b/component-library/components/cards/cards.hugo.html index b424d22..9e8b0ed 100644 --- a/component-library/components/cards/cards.hugo.html +++ b/component-library/components/cards/cards.hugo.html @@ -37,6 +37,8 @@ {{/* Initialize local variables */}} {{ $raw := "" }} + {{ $cards := "" }} + {{ $split := eq .layout "split" }} {{ $list := slice }} {{ range .elements }} @@ -60,8 +62,8 @@ "page" $page "heading-level" (cond (isset . "heading_level") .heading_level (index . "heading-level")) "heading" .heading - "justify" .justify - "class" (printf "pb-%d" $padding.y))) + "justify" (cond $split "start" .justify) + "class" (cond $split "" (printf "pb-%d" $padding.y)))) -}} {{/* Init base arguments for card group */}} @@ -70,7 +72,7 @@ "list" $list "class" (or .class "border-0 card-icon-primary") "cols" .cols - "gutter" "4" + "gutter" (cond $split "3" "4") "padding" .padding "header-style" "none" "footer-style" "none" @@ -83,13 +85,13 @@ {{- with or .align_rows (index . "align-rows") }}{{ $params = merge $params (dict "align-rows" .) }}{{ end }} {{/* Layout for small screens */}} - {{- $raw = printf "%s%s" $raw (partial "assets/card-group.html" (merge $params (dict + {{- $cards = printf "%s%s" $cards (partial "assets/card-group.html" (merge $params (dict "orientation" (.orientation | default "horizontal-sm") "wrapper" (printf "d-%s-none" $breakpoint.prev) ))) -}} {{/* Layout for regular screens */}} - {{- $raw = printf "%s%s" $raw (partial "assets/card-group.html" (merge $params (dict + {{- $cards = printf "%s%s" $cards (partial "assets/card-group.html" (merge $params (dict "orientation" (.orientation | default "stacked") "wrapper" (printf "d-none d-%s-block" $breakpoint.prev) ))) -}} @@ -103,7 +105,15 @@ "justify" "start" "link-type" (or .link_type (index . "link-type")) ) }} - {{ $raw = printf "%s%s" $raw $links }} + {{ end }} + + {{/* The split layout sets the heading and links beside the cards, one breakpoint after the + section width applies so tablets keep the full width for both. */}} + {{ if $split }} + {{ with $links }}{{ $links = printf `
%s
` . }}{{ end }} + {{ $raw = printf `
%s%s
%s
` $breakpoint.next $breakpoint.next $raw $links $breakpoint.next $cards }} + {{ else }} + {{ $raw = printf "%s%s%s" $raw $cards $links }} {{ end }} {{ if $raw }} diff --git a/component-library/components/cards/cards.yml b/component-library/components/cards/cards.yml index dff0eb9..72f6f42 100644 --- a/component-library/components/cards/cards.yml +++ b/component-library/components/cards/cards.yml @@ -3,7 +3,9 @@ comment: >- accepts an optional subtitle and highlight, rendered as inline markdown between the title and the description. Set align_rows with a stacked orientation to line up the titles, subtitles, highlights, descriptions and - buttons of the cards in each row. + buttons of the cards in each row. Set layout to split to place the + heading and links beside the cards, in two equal columns from the lg + breakpoint up. Combine it with cols: 1 and padding: 0 for a compact stack. example: | heading: title: Our Services diff --git a/exampleSite/content/components/cards.md b/exampleSite/content/components/cards.md index 888df5b..dc77081 100644 --- a/exampleSite/content/components/cards.md +++ b/exampleSite/content/components/cards.md @@ -24,6 +24,34 @@ content_blocks: - title: All components url: /components/ icon: fas chevron-right + - _bookshop_name: cards + heading: + preheading: Our approach + title: Split layout + content: >- + With `layout` set to `split`, the heading and links sit beside the + cards. Below the `lg` breakpoint, the columns stack. + align: start + layout: split + orientation: horizontal + cols: 1 + padding: 0 + width: 10 + justify: center + elements: + - title: People oriented + icon: fas user-group + content: People are at the heart of any organization. + - title: Value obsessed + icon: fas heart + content: We ensure your investments bring tangible value. + - title: Tech savvy + icon: fas microchip + content: We help you identify and utilize the right technology. + links: + - title: All components + url: /components/ + icon: fas chevron-right - _bookshop_name: cards heading: preheading: Pricing