diff --git a/base.scss b/base.scss
index 1c94a6f29..5e584d9d1 100644
--- a/base.scss
+++ b/base.scss
@@ -144,6 +144,7 @@
@import "./src/stories/Library/filtered-event-list/filtered-event-list";
@import "./src/stories/Library/event-list-stacked/event-list-stacked";
@import "./src/stories/Library/material-search/material-search";
+@import "./src/stories/Library/banner/banner";
// Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
@import "./src/stories/Blocks/autosuggest/autosuggest";
diff --git a/public/icons/basic/icon-underlined.svg b/public/icons/basic/icon-underlined.svg
new file mode 100644
index 000000000..8352ab299
--- /dev/null
+++ b/public/icons/basic/icon-underlined.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/stories/Library/banner/Banner.stories.tsx b/src/stories/Library/banner/Banner.stories.tsx
new file mode 100644
index 000000000..4f5ac8a6b
--- /dev/null
+++ b/src/stories/Library/banner/Banner.stories.tsx
@@ -0,0 +1,72 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import Banner from "./Banner";
+
+export default {
+ title: "Library / Banner",
+ component: Banner,
+ decorators: [withDesign],
+ parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=446-6957&t=IWAOniAbcjV2y2Hf-4",
+ },
+ },
+ argTypes: {
+ imageSrc: {
+ defaultValue: "images/campaign_cover.jpg",
+ control: { type: "text" },
+ },
+ title: {
+ name: "Title",
+ defaultValue: "Hvad skal jeg høre?",
+ control: { type: "text" },
+ },
+ description: {
+ name: "Description",
+ defaultValue:
+ "Om du er dedikeret musiknørd eller moderat musikinteresseret, så er dette siden til dig. Her kan du finde anbefalinger, digitale musikmagasiner, nyheder, musiklitteratur og meget mere.",
+ control: { type: "text" },
+ },
+ link: {
+ name: "Link",
+ defaultValue: "#",
+ control: { type: "text" },
+ },
+ },
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => ;
+
+export const Default = Template.bind({});
+
+export const NoImage = Template.bind({});
+NoImage.args = {
+ imageSrc: undefined,
+};
+
+export const NoImageOnlyTitle = Template.bind({});
+NoImageOnlyTitle.args = {
+ title: "Title uden billede",
+ imageSrc: undefined,
+ description: undefined,
+};
+
+export const NoImageOnlyDescription = Template.bind({});
+NoImageOnlyDescription.args = {
+ title: undefined,
+ imageSrc: undefined,
+ description:
+ "Om du er dedikeret musiknørd eller moderat musikinteresseret, så er dette siden til dig. Her kan du finde anbefalinger, digitale musikmagasiner, nyheder, musiklitteratur og meget mere.",
+};
+
+export const WithImageOnlyTitle = Template.bind({});
+WithImageOnlyTitle.args = {
+ title: "Banner uden beskrivelse",
+ description: undefined,
+};
+export const WithImageOnlyDescription = Template.bind({});
+WithImageOnlyDescription.args = {
+ description:
+ "Om du er dedikeret musiknørd eller moderat musikinteresseret, så er dette siden til dig. Her kan du finde anbefalinger, digitale musikmagasiner, nyheder, musiklitteratur og meget mere.",
+};
diff --git a/src/stories/Library/banner/Banner.tsx b/src/stories/Library/banner/Banner.tsx
new file mode 100644
index 000000000..9bdb2787e
--- /dev/null
+++ b/src/stories/Library/banner/Banner.tsx
@@ -0,0 +1,46 @@
+import clsx from "clsx";
+import { FC, ReactNode } from "react";
+import { ReactComponent as ArrowLargeRight } from "../Arrows/icon-arrow-ui/icon-arrow-ui-large-right.svg";
+
+type BannerType = {
+ link: string;
+ title: string;
+ imageSrc?: ReactNode;
+ description?: string;
+};
+
+const Banner: FC = ({ link, imageSrc, title, description }) => {
+ const backgroundImageStyle = imageSrc
+ ? { backgroundImage: `url(${imageSrc})` }
+ : {};
+ return (
+
+
+
+ {title && (
+
) words.
+ // eslint-disable-next-line react/no-danger
+ dangerouslySetInnerHTML={{ __html: title }}
+ />
+ )}
+ {description &&
{description}
}
+
+
+