Add EventParagraphs component to EventPage + Use layout-container where its needed

base.scss

@@ -101,6 +101,7 @@
 @import "./src/stories/Library/link-with-icon/link-with-icon";
 @import "./src/stories/Library/rich-text/rich-text";
 @import "./src/stories/Library/medias/medias";
+@import "./src/stories/Library/event-paragraphs/event-paragraphs";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";

src/stories/Blocks/event-page/EventPage.tsx

@@ -3,6 +3,7 @@ import EventHeader from "../../Library/event-header/EventHeader";
 import EventDescription, {
   EventDescriptionProps,
 } from "../../Library/event-description/EventDescription";
+import EventParagraphs from "../../Library/event-paragraphs/EventParagraphs";
 
 type EventPageProps = {
   title: string;
@@ -28,6 +29,7 @@ const EventPage: FC<EventPageProps> = ({
         horizontalTermLineData={horizontalTermLineData}
         listDescriptionData={listDescriptionData}
       />
+      <EventParagraphs />
     </article>
   );
 };

src/stories/Library/event-description/event-description.scss

@@ -1,9 +1,5 @@
 .event-description {
-  // @todo use @include layout-container instead here.
-  padding: $s-md;
-  max-width: $layout__max-width;
-  margin: 0 auto;
-
+  @include layout-container;
   @include media-query__small {
     padding: $s-xl $s-4xl;
     display: grid;

src/stories/Library/event-header/event-header.scss

@@ -1,8 +1,5 @@
 .event-header {
-  // @todo use @include layout-container instead here.
-  max-width: $layout__max-width;
-  margin: 0 auto;
-
+  @include layout-container;
   border-bottom: 1px solid $color__global-tertiary-1;
   display: grid;
   gap: $s-lg;

src/stories/Library/event-paragraphs/EventParagraphs.tsx

@@ -0,0 +1,17 @@
+import { LinkWithIcon } from "../link-with-icon/LinkWithIcon";
+import { RichTextEvent } from "../rich-text/RichText";
+
+const EventParagraphs = () => {
+  return (
+    <section className="event-paragraphs">
+      <RichTextEvent />
+      <LinkWithIcon
+        href="https://example.com"
+        linkText="External Link"
+        linkType="external"
+      />
+    </section>
+  );
+};
+
+export default EventParagraphs;

src/stories/Library/event-paragraphs/event-paragraphs.scss

@@ -0,0 +1,4 @@
+.event-paragraphs {
+  @include layout-container;
+  padding-bottom: $layout__page-padding;
+}

src/stories/Library/rich-text/RichText.tsx

@@ -48,3 +48,21 @@ export const RichText = () => {
     </div>
   );
 };
+
+export const RichTextEvent = () => (
+  <div className="rich-text">
+    <h2>Om udstillingen</h2>
+    <p>
+      Deltagende kunstnere: Ei Arakawa, Mohamed Bourouissa, Cao Fei, Simon
+      Denny, Lara Favaretto, GCC, Guan Xiao, Shadi Habib Allah, Roger Hiorns,
+      Oliver Laric, Liz Magic Laser, Katja Novitskova, Laura Owens, Yuri
+      Pattison, Sondra Perry, Josephine Pryde, Nick Relph, Cameron Rowland, Hito
+      Steyerl, Martine Syms, Nora Turato.
+    </p>
+    <p>
+      Post-Capital: Art and the Economics of the Digital Age er kurateret af
+      Michelle Cotton og produceret af Mudam Luxembourg – Musée d’Art Moderne
+      Grand-Duc Jean i tæt samarbejde med Kunsthal Charlottenborg.
+    </p>
+  </div>
+);