diff --git a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Atom/Tag/Tag.fusion b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Atom/Tag/Tag.fusion
new file mode 100644
index 000000000..ce024b408
--- /dev/null
+++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Atom/Tag/Tag.fusion
@@ -0,0 +1,48 @@
+prototype(Neos.Presentation:Tag) < prototype(Neos.Fusion:Component) {
+
+ @styleguide {
+ title = "Tag"
+ props {
+ text = 'Tag Text'
+ href = '#link'
+ }
+ useCases {
+ numbered.props {
+ text = 'Tag Text'
+ number = 42
+ href = '#link'
+ }
+ }
+ }
+
+ @propTypes {
+ text = ${PropTypes.string.isRequired}
+ href = ${PropTypes.anyOf(PropTypes.string)}
+ number = ${PropTypes.integer}
+ disabled = ${PropTypes.boolean}
+ }
+
+ text = null
+ href = null
+ number = null
+
+ attributes = Neos.Fusion:DataStructure
+ class = null
+
+ renderer = Neos.Fusion:Tag {
+ tagName = 'a'
+ attributes {
+ @apply.attributes = ${props.attributes}
+ class = ${AtomicFusion.classNames(
+ 'n-tag',
+ 'display-body-md',
+ props.class
+ )}
+ href = ${props.href}
+ }
+ content = afx`
+ {props.text}
+ {props.number}
+ `
+ }
+}
diff --git a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Atom/Tag/Tag.pcss b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Atom/Tag/Tag.pcss
new file mode 100644
index 000000000..fe5a129be
--- /dev/null
+++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Atom/Tag/Tag.pcss
@@ -0,0 +1,23 @@
+.n-tag {
+ @apply inline-block;
+
+ span {
+ @apply inline-flex h-9 px-3 bg-darkblue text-white flex flex-col justify-center text-center;
+ }
+
+ &:hover span {
+ @apply bg-accent-purple;
+ }
+
+ span:only-child {
+ @apply rounded;
+ }
+
+ span:first-child {
+ @apply mr-[2px] rounded-tl rounded-bl;
+ }
+
+ span:last-child {
+ @apply rounded-tr rounded-br;
+ }
+}
diff --git a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Teaser.fusion b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Teaser.fusion
index 8925e7e18..db46023fa 100644
--- a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Teaser.fusion
+++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Teaser.fusion
@@ -3,6 +3,7 @@ prototype(Neos.Presentation:Module.Teaser) < prototype(Neos.Fusion:Component) {
@styleguide {
title = "Teaser"
props {
+ variant = 'default'
headline.text = 'Ready for Neos CMS?'
primaryLink.text = 'Try Neos now'
primaryLink.icon = Neos.Presentation:Icon {
@@ -14,6 +15,34 @@ prototype(Neos.Presentation:Module.Teaser) < prototype(Neos.Fusion:Component) {
uri = 'https://source.unsplash.com/random/800x600'
}
}
+ useCases {
+ imageBackgroundWithFreeContent.props {
+ variant = 'imageBackground'
+ headline.text = 'Find your nearest Neos Partner'
+ content = afx`
+
+
+
+
+
+
+
+
+ `
+ image.imageSource = Sitegeist.Kaleidoscope:ResourceImageSource {
+ package = 'Neos.Presentation'
+ path = 'Assets/Styleguide/teaser/EuropaNeosMap.svg'
+ }
+ secondaryLink {
+ text = 'All Service Providers'
+ icon = Neos.Presentation:Icon {
+ name = 'pixel-chevron-right'
+ class = 'h-6'
+ }
+ href = '#'
+ }
+ }
+ }
}
@propTypes {
@@ -34,27 +63,40 @@ prototype(Neos.Presentation:Module.Teaser) < prototype(Neos.Fusion:Component) {
}
}
+ variant = 'default'
+ image = null
+ headline = null
+ description = null
+ content = null
+ primaryLink = null
+ secondaryLink = null
+
renderer = afx`
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ {props.content}
+
+
+
+
+
+
+
+
-
-
+
+