Quickstart: Switch to horizontal cards

editions/tw5.com/tiddlers/hellothere/HelloThere.tid

@@ -13,9 +13,9 @@ TiddlyWiki lets you choose where to keep your data, guaranteeing that in the dec
 
 !! ''Quick Start''
 
-<div class="tc-cards tc-cards-vertical">
+<div class="tc-cards tc-action-card">
 <$list filter="[tag[Quick Start]]">
-<$macrocall $name="flex-card" bordercolor={{!!color}} textcolor={{!!text-color}}  backgroundcolor={{!!background-color}} captionField="caption" descriptionField="text"/>
+<$macrocall $name="flex-card" bordercolor={{!!color}} textcolor={{!!text-color}} backgroundcolor={{!!background-color}} captionField="caption" descriptionField="text"/>
 </$list>
 </div>
 

editions/tw5.com/tiddlers/hellothere/quickstart/desktop.tid

@@ -1,7 +1,9 @@
 title: Quick Start: Desktop
 tags: [[Quick Start]]
-caption: DESKTOP {{$:/core/images/storyview-zoomin}}
-background-color: #9de1a5
+caption: Desktop
+icon: $:/core/images/storyview-zoomin
+button-color: #37753e
+button-text: Download
 link: TiddlyDesktop
 
 Download the official desktop application for macOS, Windows and Linux

editions/tw5.com/tiddlers/hellothere/quickstart/diy.tid

@@ -1,7 +1,9 @@
 title: Quick Start: DIY
 tags: [[Quick Start]]
-caption: DIY {{$:/core/images/theme-button}}
-background-color: #ecc2ba
+caption: DIY
+icon: $:/core/images/theme-button
+button-color: #ff4522
+button-text: Explore
 link: GettingStarted
 
 Get the full benefits of ~TiddlyWiki by finding the configuration that is right for you

editions/tw5.com/tiddlers/hellothere/quickstart/tiddlyhost.tid

@@ -1,7 +1,9 @@
-title: Quick Start: Online
+title: Quick Start: Tiddlyhost
 tags: [[Quick Start]]
-caption: ONLINE {{$:/core/images/globe}}
-background-color: #c3d3ff
+caption: Tiddlyhost
+icon: $:/core/images/globe
+button-color: #00009a
+button-text: Create Account
 background: linear-gradient(90deg,#c3d3ff, #ffffff)
 link: Tiddlyhost
 

editions/tw5.com/tiddlers/hellothere/quickstart/xememex.tid

@@ -1,7 +1,9 @@
 title: Quick Start: Xememex
 tags: [[Quick Start]]
-caption: COMMERCIAL {{$:/core/images/star-filled}}
-background-color: #e9c1f1
+caption: Xememex
+icon: $:/core/images/star-filled
+button-color: #bf5fb6
+button-text: Find out more
 link: Xememex
 
 Xememex is the multiuser serverless implementation of ~TiddlyWiki from Federatial

editions/tw5.com/tiddlers/system/tw5.com-styles.tid

@@ -82,6 +82,8 @@ type: text/vnd.tiddlywiki
 	height: 1em;
 }
 
+
+
 .tc-wrapper-flex {
 	display: flex;
 }
@@ -136,14 +138,52 @@ type: text/vnd.tiddlywiki
 .tc-cards {
 	display: flex;
 	flex-wrap: wrap;
-	justify-content: flex-start;
+	justify-content: space-evenly;
 	width: 100%;
+	padding: 0.5em;
+	background: <<colour background>>;
+	border-color: rgba(34,36,38,.15);
+	box-shadow: 0 2px 25px 0 rgb(34 36 38 / 5%) inset;
 	gap: 1em;
 }
 
-.tc-cards.tc-cards-vertical {
-	flex-direction: column;
-	gap: 0.5em;
+.tc-cards.tc-action-card {
+	text-align: center;
+	background: none;
+}
+
+.tc-cards.tc-action-card .tc-card-button {
+	border: 1px solid <<colour foreground>>;
+	background: <<colour foreground>>;
+	color: <<colour background>>;
+	margin: 0.5em;
+	border-radius: 6px;
+}
+
+.tc-cards.tc-action-card .tc-card-button a {
+	border-radius: 6px;
+	padding: 0.5em;
+	color: <<colour background>>;
+	fill: <<colour background>>;
+	display: inline-block;
+	width:100%;
+	height:100%;
+}
+
+.tc-cards.tc-action-card .tc-card:hover .tc-card-button a {
+	background: <<colour background>>;
+	color: <<colour foreground>>;
+	fill: <<colour foreground>>;
+}
+
+.tc-cards.tc-action-card .tc-card-button a:hover {
+	text-decoration: none;
+}
+
+.tc-cards.tc-action-card .tc-card-button a svg {
+	width: 0.65em;
+	height: 0.65em;
+	vertical-align: middle;
 }
 
 .tc-tiddlylink.tc-card {

editions/tw5.com/tiddlers/system/wikitext-macros.tid

@@ -119,6 +119,7 @@ That renders as:
 				<$text text=<<__subtitle__>>/>
 			</div>
 		</$list>
+		<div class="tc-card-icon"><$transclude tiddler={{!!icon}}/></div>
 		<div class="tc-card-body-wrapper">
 			<div class="tc-card-body">
 				<$transclude field=<<__descriptionField__>> mode="block"/>
@@ -126,6 +127,13 @@ That renders as:
 			<div class="tc-card-body-clear">
 			</div>
 		</div>
+		<$list filter="[all[current]has[button-text]]" variable="ignore">
+			<div class="tc-card-button" style.background-color={{!!button-color}} style.border-color={{!!button-color}}>
+				<$link to={{!!link}}>
+					<$text text={{!!button-text}}/>&#32;{{$:/core/images/chevron-right}}
+				</$link>
+			</div>
+		</$list>
 	</div>
 </$link>
 \end