Added color code for card overviews

th-koeln · Dec 3, 2023 · 803ade6 · 803ade6
1 parent ae90306
commit 803ade6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/src/_layouts/snippets/card-overview.11ty.js b/src/_layouts/snippets/card-overview.11ty.js
@@ -3,6 +3,7 @@ exports.render = (eleventy, data, attributes) => {
   const {id} = attributes;
   const {search} = attributes;
   const searchParams = search.split('+');
+  const className = attributes.className || '';
 
   const filteredCards = data.collections.contentCards.filter(card => {
     const inOverview = card.data.inOverview || [];
@@ -28,7 +29,7 @@ exports.render = (eleventy, data, attributes) => {
   });
 
   return `
-    <ul id="${id}" class="content-card-overview">
+    <ul id="${id}" class="content-card-overview ${className}">
       ${cardsList.join('')}
     </ul>
   `;

diff --git a/src/assets/styles/scss/components/cards.scss b/src/assets/styles/scss/components/cards.scss
@@ -14,6 +14,13 @@ ul.content-card-overview{
   }
 }
 
+
+ul.content-card-overview.stakeholder{
+  .content-card-item{
+    border-color: var(--mi-lila);
+  }
+}
+
 .content-card{
 
   &-item{

diff --git a/src/index.md b/src/index.md
@@ -9,4 +9,4 @@ bodyClass: home
 
 <snippet type="card-overview" id="content-cards" search="home"></snippet>
 
-<snippet type="card-overview" id="content-cards" search="home-stakeholder"></snippet>
+<snippet type="card-overview" id="content-cards" search="home-stakeholder" className="stakeholder"></snippet>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,4 +9,4 @@ bodyClass: home

		<snippet type="card-overview" id="content-cards" search="home"></snippet>

		<snippet type="card-overview" id="content-cards" search="home-stakeholder"></snippet>
		<snippet type="card-overview" id="content-cards" search="home-stakeholder" className="stakeholder"></snippet>