[TASK] Add meta info to latest news layout 2

Resources/Private/Partials/TeaserContentOverview.html

@@ -4,6 +4,39 @@
 			{headerTag -> f:format.raw()}
 			{newsMetaData.news.subtitleWithFallbackToTitle}
 			{closingHeaderTag -> f:format.raw()}
+
+			<div class="tx-sgnews-teaser-meta">
+				<f:alias map="{authorCount: '{newsMetaData.news.newsAuthor -> f:count()}'}">
+					<f:if condition="{authorCount}">
+						<span class="author">
+							<f:for each="{newsMetaData.news.newsAuthor}" as="newsAuthor" iteration="iterator">
+								<f:alias map="{divider: '{f:if(condition: \'{iterator.cycle} < {authorCount}\', then: \',\')}'}">
+									<f:if condition="{newsAuthor.name}">
+										{newsAuthor.name}{divider}
+									</f:if>
+								</f:alias>
+							</f:for>
+						</span>
+					</f:if>
+				</f:alias>
+
+				<span class="date">
+					<f:format.date
+						format="{f:translate(key:'frontend.dateformat')}">{newsMetaData.news.lastUpdated}</f:format.date>
+				</span>
+
+				<span class="category">
+					{newsMetaData.category.subtitleWithFallbackToTitle}
+				</span>
+
+				<f:if condition="{newsMetaData.news.tags}">
+					<span class="tags">
+						<f:for each="{newsMetaData.news.tags}" as="tag" iteration="it">
+							{tag.title}<f:if condition="{it.isLast}"><f:else>, </f:else></f:if>
+						</f:for>
+					</span>
+				</f:if>
+			</div>
 		</div>
 
 		<div class="tx-sgnews-teaser-description">

Resources/Public/Sass/_layout-content.scss

@@ -95,5 +95,50 @@ $sg-news-chevron-color: var(--component-color-primary-background, $black-base);
 		}
 	}
 
+	.tx-sgnews-teaser-meta {
+		color: var(--component-color-foreground);
+		// stylelint-disable declaration-no-important
+		font-size: 1em !important;
+		text-align: left !important;
+		// stylelint-enable
+		margin: -10px 0 5px;
+		display: flex;
+		flex-wrap: wrap;
+
+		.date::before {
+			@include inline-svg($icon-regular-calendar-alt, $black-base);
+			width: 9px;
+			height: 10px;
+			margin: 0;
+		}
+
+		.author::before {
+			@include inline-svg($icon-solid-user, $black-base);
+			width: 9px;
+			height: 10px;
+			margin: 0;
+		}
+
+		.category::before {
+			@include inline-svg($icon-solid-tag, $black-base);
+			content: '';
+			display: inline-block;
+			width: 9px;
+			height: 10px;
+			margin: 0;
+		}
 
+		.tags::before {
+			@include inline-svg($icon-solid-tags, $black-base);
+			content: '';
+			display: inline-block;
+			width: 9px;
+			height: 10px;
+			margin: 0;
+		}
+
+		> span:not(:last-child) {
+			margin-right: 15px;
+		}
+	}
 }