diff --git a/entry_types/scrolled/config/locales/new/ext-link-options.de.yml b/entry_types/scrolled/config/locales/new/ext-link-options.de.yml
index a70afed1ca..44a0cde1a1 100644
--- a/entry_types/scrolled/config/locales/new/ext-link-options.de.yml
+++ b/entry_types/scrolled/config/locales/new/ext-link-options.de.yml
@@ -1,4 +1,7 @@
 de:
+  pageflow:
+    external_links_options:
+      feature_name: "External Links Optionen"
   pageflow_scrolled:
     editor:
       content_elements:
@@ -6,9 +9,55 @@ de:
           attributes:
             thumbnailAspectRatio:
               label: "Thumbnail Seitenverhältnis"
+              inline_help: |-
+                Bestimme die Proportion der Thumbnails. Wird der Text
+                neben dem Bild gezeigt, kann längerer Text dazu
+                führen, dass ein hochformatigeres Seitenverähltnis
+                gewählt wird, damit das Thumbnail die gesamte Höhe des
+                Links überdeckt.
               values:
                 narrow: Landscape (4:3)
                 portrait: Portrait (3:4)
                 square: Quadratisch (1:1)
                 wide: Landscape (16:9)
                 original: Original
+            textPosition:
+              label: "Textposition"
+              inline_help: |-
+                Anordnung von Bild und Text innerhalb von Links.
+              values:
+                below: "Unter dem Bild"
+                right: "Rechts neben dem Bild"
+                title: "Nur Bild"
+            thumbnailSize:
+              label: "Thumbnail-Breite"
+              inline_help: |-
+                Anteil der Thumbnail-Breite im Verhältnis zur
+                Gesamtbreite des Links.
+              values:
+                small: "Klein"
+                medium: "Mittel"
+                large: "Groß"
+            linkWidth:
+              label: "Link-Breite"
+              inline_help: |-
+                Wähle eine schmalere Breite, um mehr Links
+                nebeneinander anzuordnen.
+            linkAlignment:
+              label: "Link-Ausrichtung"
+              inline_help: |-
+                Bestimmt die Ausrichtung in Zeilen, die nicht
+                vollständig mit Links gefüllt sind.
+              values:
+                spaceEvenly: Gleichmäßig verteilt
+                left: Links
+                right: Rechts
+                center: Mittig
+            textSize:
+              label: "Schriftgröße"
+              inline_help: |
+                Legt die Schriftgröße für Titel und Beschreibung der Links fest.
+              values:
+                small: Klein
+                medium: Mittel
+                large: Groß
diff --git a/entry_types/scrolled/config/locales/new/ext-link-options.en.yml b/entry_types/scrolled/config/locales/new/ext-link-options.en.yml
index daf4792eae..4861aec48b 100644
--- a/entry_types/scrolled/config/locales/new/ext-link-options.en.yml
+++ b/entry_types/scrolled/config/locales/new/ext-link-options.en.yml
@@ -1,4 +1,7 @@
 en:
+  pageflow:
+    external_links_options:
+      feature_name: "External Links Options"
   pageflow_scrolled:
     editor:
       content_elements:
@@ -6,9 +9,54 @@ en:
           attributes:
             thumbnailAspectRatio:
               label: "Thumbnail aspect ratio"
+              inline_help: |-
+                Determine the proportions of the thumbnails. If the
+                text is displayed next to the image, longer text may
+                result in a more portrait-like aspect ratio so that
+                the thumbnail covers the entire height of the link.
               values:
                 narrow: Landscape (4:3)
                 portrait: Portrait (3:4)
                 square: Square (1:1)
                 wide: Landscape (16:9)
                 original: Original
+            textPosition:
+              label: "Text position"
+              inline_help: |-
+                Arrangement of image and text within links.
+              values:
+                below: "Below image"
+                right: "Right from image"
+                title: "Image only"
+            thumbnailSize:
+              label: "Thumbnail width"
+              inline_help: |-
+                Proportion of the thumbnail width relative to the
+                overall width of the link.
+              values:
+                small: "Small"
+                medium: "Medium"
+                large: "Large"
+            linkWidth:
+              label: "Link width"
+              inline_help: |-
+                Choose a narrower width to arrange more links
+                side by side.
+            linkAlignment:
+              label: "Link alignment"
+              inline_help: |-
+                Determines the alignment in rows that are not
+                completely filled with links.
+              values:
+                spaceEvenly: Space evenly
+                left: Left
+                right: Right
+                center: Center
+            textSize:
+              label: "Text size"
+              inline_help: |-
+                Defines the font size for the title and description of the links.
+              values:
+                small: Small
+                medium: Medium
+                large: Large
diff --git a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
index 5b7aecd6c2..6a97ffc091 100644
--- a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
+++ b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
@@ -42,6 +42,7 @@ def configure(config)
         c.features.register('frontend_v2')
         c.features.register('scrolled_entry_fragment_caching')
         c.features.register('backdrop_content_elements')
+        c.features.register('external_links_options')
 
         c.additional_frontend_seed_data.register(
           'frontendVersion',
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js
index e67187c447..31975968b5 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js
@@ -1,10 +1,12 @@
 import {editor} from 'pageflow-scrolled/editor';
-import {SelectInputView} from 'pageflow/ui';
+import {features} from 'pageflow/frontend';
+import {SelectInputView, SliderInputView, SeparatorView} from 'pageflow/ui';
 
 import {SidebarRouter} from './SidebarRouter';
 import {SidebarController} from './SidebarController';
 import {SidebarListView} from './SidebarListView';
 import {ExternalLinkCollection} from './models/ExternalLinkCollection';
+import {maxLinkWidth} from '../linkWidths';
 
 import pictogram from './pictogram.svg';
 
@@ -19,20 +21,57 @@ editor.registerSideBarRouting({
 editor.contentElementTypes.register('externalLinkList', {
   pictogram,
   category: 'links',
-  supportedPositions: ['inline'],
+  supportedPositions: ['inline', 'standAlone'],
+  supportedWidthRange: ['m', 'xl'],
 
-  configurationEditor({entry}) {
+  configurationEditor({entry, contentElement}) {
     this.tab('general', function() {
-      this.group('ContentElementVariant', {entry});
+      const layout = contentElement.section.configuration.get('layout');
+
+      if (!features.isEnabled('external_links_options')) {
+        this.group('ContentElementVariant', {entry});
+      }
 
       this.view(SidebarListView, {
         contentElement: this.model.parent,
         collection: ExternalLinkCollection.forContentElement(this.model.parent, entry)
       });
 
-      this.input('thumbnailAspectRatio', SelectInputView, {
-        values: ['wide', 'narrow', 'square', 'portrait', 'original']
-      })
+      if (features.isEnabled('external_links_options')) {
+        this.input('textPosition', SelectInputView, {
+          values: ['below', 'right', 'title']
+        });
+        this.group('ContentElementVariant', {entry});
+        this.view(SeparatorView);
+        this.group('ContentElementPosition');
+        this.view(SeparatorView);
+        this.input('linkWidth', SliderInputView, {
+          displayText: value => [
+            'XS', 'S', 'M', 'L', 'XL', 'XXL'
+          ][value + 2],
+          saveOnSlide: true,
+          minValue: -2,
+          maxValueBinding: ['width', 'textPosition'],
+          maxValue: ([width, textPosition]) => maxLinkWidth({width, layout, textPosition}),
+          defaultValue: -1
+        });
+        this.input('linkAlignment', SelectInputView, {
+          values: ['spaceEvenly', 'left', 'right', 'center'],
+          visibleBinding: 'textPosition',
+          visible: textPosition => textPosition !== 'right'
+        });
+        this.input('thumbnailSize', SelectInputView, {
+          values: ['small', 'medium', 'large'],
+          visibleBinding: 'textPosition',
+          visibleBindingValue: 'right'
+        });
+        this.input('thumbnailAspectRatio', SelectInputView, {
+          values: ['wide', 'narrow', 'square', 'portrait', 'original']
+        });
+        this.input('textSize', SelectInputView, {
+          values: ['small', 'medium', 'large']
+        });
+      }
     });
   }
 });
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js
index d30edbc8cc..11a7bd7009 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js
@@ -12,7 +12,6 @@ import {Thumbnail} from './Thumbnail';
 
 export function ExternalLink(props) {
   const [hideTooltip, setHideTooltip] = useState(true);
-  var {layout} = props.sectionProps;
   const {t} = useI18n({locale: 'ui'});
   const {isEditable, isSelected} = useContentElementEditorState();
   const thumbnailImageFile = useFileWithInlineRights({
@@ -56,23 +55,27 @@ export function ExternalLink(props) {
   }
 
   return (
-    <a className={classNames(styles.link_item,
-                             {
-                               [styles.invert]: props.invert,
-                               [styles.layout_center]:
-                                 layout === 'center' || layout === 'centerRagged'
-                             })}
+    <a className={classNames(styles.item,
+                             styles[`textPosition-${props.textPosition}`],
+                             styles[`thumbnailSize-${props.thumbnailSize}`],
+                             styles[`textSize-${props.textSize}`],
+                             {[styles.invert]: props.invert})}
        href={url || 'about:blank'}
+       title={props.textPosition === 'title' ?
+              [props.title, props.description].filter(Boolean).join("\n") :
+              null}
        onClick={onClick}
        onMouseLeave={onMouseLeave}
        target={props.open_in_new_tab ? '_blank' : '_self'}
        rel={props.open_in_new_tab ? 'noopen noreferrer' : undefined}>
-      <Thumbnail imageFile={thumbnailImageFile}
-                 aspectRatio={props.thumbnailAspectRatio}
-                 cropPosition={props.thumbnailCropPosition}
-                 load={props.loadImages}>
-        <InlineFileRights context="insideElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
-      </Thumbnail>
+      <div className={styles.thumbnail}>
+        <Thumbnail imageFile={thumbnailImageFile}
+                   aspectRatio={props.thumbnailAspectRatio}
+                   cropPosition={props.thumbnailCropPosition}
+                   load={props.loadImages}>
+          <InlineFileRights context="insideElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
+        </Thumbnail>
+      </div>
       <div className={styles.background}>
         <InlineFileRights context="afterElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
         <div className={styles.details}>
@@ -85,10 +88,6 @@ export function ExternalLink(props) {
   );
 }
 
-ExternalLink.defaultProps = {
-  sectionProps: {}
-};
-
 function ensureAbsolute(url) {
   if (url.match(/^(https?:)?\/\//)) {
     return url;
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
index 0a03aebe87..24f34e4d14 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
@@ -9,12 +9,9 @@
   display: none;
 }
 
-.link_item {
+.item {
   display: flex;
-  flex-direction: column;
-  width: 45%;
   vertical-align: top;
-  margin: 2% auto;
   text-decoration: none;
   transition: transform 0.3s;
   border-radius: var(--theme-content-element-box-border-radius);
@@ -22,18 +19,38 @@
   will-change: transform;
 }
 
-.link_item.layout_center {
-  width: 29%;
+.textPosition-below {
+  flex-direction: column;
+}
+
+.textPosition-title {
+  composes: textPosition-below;
 }
 
-.link_item:hover {
+.textPosition-below:hover {
   transform: scale(var(--theme-external-links-card-hover-scale, 1.05));
 }
 
-.link_item:hover .link_title {
+.textPosition-right:hover {
+  transform: scale(var(--theme-external-links-card-hover-scale, 1.02));
+}
+
+.item:hover .link_title {
   text-decoration: underline;
 }
 
+.textPosition-right .thumbnail {
+  width: 33%;
+}
+
+.textPosition-right.thumbnailSize-medium .thumbnail {
+  width: 50%;
+}
+
+.textPosition-right.thumbnailSize-large .thumbnail {
+  width: 66%;
+}
+
 .background {
   --padding-inline: var(--theme-external-links-card-padding-inline, 15px);
   flex: 1;
@@ -44,17 +61,25 @@
   padding-right: min(var(--padding-inline), 5px);
 }
 
-.details {
+.textPosition-title .background {
+  display: none;
+}
+
+.textPosition-below .details {
   padding-top: 15px;
   padding-bottom: 20px;
   padding-left: calc(var(--padding-inline) - 5px);
   padding-right: calc(var(--padding-inline) - 5px);
 }
 
-.details:first-child {
+.textPosition-below .details:first-child {
   padding-top: 20px;
 }
 
+.textPosition-right .details {
+  padding: 10px 10px 10px 15px;
+}
+
 .invert > .background {
   background-color: var(--theme-external-links-card-surface-color, darkContentSurfaceColor);
   color: var(--theme-external-links-card-text-color, lightContentTextColor);
@@ -66,23 +91,35 @@
   width: 100%;
   white-space: normal;
   line-height: 1.3em;
-  margin-bottom: 0;
 }
 
 .link_title {
   composes: typography-externalLinkTitle from global;
   font-weight: bold;
-  margin: 0 0 20px;
+  margin: 0 0 1rem;
 }
 
 .link_desc {
   composes: typography-externalLinkDescription from global;
+  margin: 0;
+}
+
+.textSize-medium {
+  font-size: 18px;
+}
+
+.textSize-large {
+  font-size: 20px;
 }
 
 @media screen and breakpoint-sm {
-  .link_title {
+  .textSize-small .link_title {
     font-size: 1.2em;
   }
+
+  .textSize-medium .link_title {
+    font-size: 1.1em;
+  }
 }
 
 .tooltip {
@@ -105,18 +142,3 @@
   color: #fff;
   text-decoration: underline;
 }
-
-@media only screen and (max-width: 600px) {
-  .link_item.layout_center {
-    width: 45%;
-  }
-}
-
-@media only screen and (max-width: 350px) {
-  .link_item {
-    width: 85%;
-  }
-  .link_item.layout_center {
-    width: 85%;
-  }
-}
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js
index 0809715486..9b5aa39475 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js
@@ -1,28 +1,70 @@
 import React from 'react';
 import classNames from 'classnames';
-import {useContentElementLifecycle, useDarkBackground} from 'pageflow-scrolled/frontend';
+import {
+  useContentElementLifecycle,
+  useDarkBackground,
+  contentElementWidthName
+} from 'pageflow-scrolled/frontend';
 import {ExternalLink} from './ExternalLink';
 import styles from './ExternalLinkList.module.css';
 
+import textPositionBelowStyles from './textPositons/below.module.css';
+import textPositionRightStyles from './textPositons/right.module.css';
+
+const linkWidths = value => [
+  'xs',
+  's',
+  'm',
+  'l',
+  'xl',
+  'xxl'
+][value + 2];
+
 export function ExternalLinkList(props) {
   const linkList = props.configuration.links || [];
   const {shouldLoad} = useContentElementLifecycle();
   const darkBackground = useDarkBackground();
 
+  const layout = props.sectionProps.layout === 'centerRagged' ?
+                 'center' :
+                 props.sectionProps.layout;
+
+  const linkWidth = linkWidths(
+    ('linkWidth' in props.configuration) ? props.configuration.linkWidth : -1
+  );
+
+  const textPosition = props.configuration.textPosition || 'below';
+  const textPositionStyles = textPosition === 'right' ?
+                             textPositionRightStyles :
+                             textPositionBelowStyles;
+
   return (
-    <div className={classNames(
-      styles.ext_links_container,
-      props.configuration.variant &&
-      `scope-externalLinkList-${props.configuration.variant}`
-    )}>
-      {linkList.map((link, index) =>
-        <ExternalLink {...link}
-                      key={link.id}
-                      thumbnailAspectRatio={props.configuration.thumbnailAspectRatio}
-                      invert={!darkBackground}
-                      sectionProps={props.sectionProps}
-                      loadImages={shouldLoad} />
-      )}
+    <div className={styles.container}>
+      <div className={classNames(
+        styles.list,
+        styles[`textPosition-${textPosition}`],
+
+        props.configuration.variant &&
+        `scope-externalLinkList-${props.configuration.variant}`,
+
+        textPositionStyles.list,
+        textPositionStyles[`layout-${layout}`],
+        textPositionStyles[`width-${contentElementWidthName(props.configuration.width)}`],
+        textPositionStyles[`linkWidth-${linkWidth}`],
+        textPositionStyles[`linkAlignment-${props.configuration.linkAlignment}`],
+        textPositionStyles[`textPosition-${textPosition}`]
+      )}>
+        {linkList.map((link, index) =>
+          <ExternalLink {...link}
+                        key={link.id}
+                        thumbnailAspectRatio={props.configuration.thumbnailAspectRatio}
+                        thumbnailSize={props.configuration.thumbnailSize || 'small'}
+                        textPosition={props.configuration.textPosition || 'below'}
+                        textSize={props.configuration.textSize || 'small'}
+                        invert={!darkBackground}
+                        loadImages={shouldLoad} />
+        )}
+      </div>
     </div>
   );
 }
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css
index fc3a5e5ad2..e81d580556 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css
@@ -1,20 +1,14 @@
 @value contentColorScope from "pageflow-scrolled/values/colors.module.css";
 
-.ext_links_container{
+.container {
+  container-type: inline-size;
+}
+
+.list {
   composes: scope-externalLinks from global;
   composes: contentColorScope;
-  display: flex;
-  flex-wrap: wrap;
-  border-collapse: separate;
-  border-spacing: 10px;
+}
+
+.textPosition-below {
   min-height: 240px;
-  width: auto;
-  height: auto;
-  pointer-events: auto;
-  position: relative;
-  -webkit-transition: opacity 0.5s;
-  -moz-transition: opacity 0.5s;
-  transition: opacity 0.5s;
-  transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);
-  transition-duration: 0ms;
 }
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/Thumbnail.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/Thumbnail.module.css
index ec165ba092..08baa540cb 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/Thumbnail.module.css
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/Thumbnail.module.css
@@ -2,4 +2,6 @@
   width: auto;
   padding-top: 56.25%;
   position: relative;
+  height: 100%;
+  box-sizing: border-box;;
 }
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css
new file mode 100644
index 0000000000..d47ac92269
--- /dev/null
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css
@@ -0,0 +1,112 @@
+.list {
+  --columns: 1;
+  --gap: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--gap);
+  justify-content: space-evenly;
+}
+
+.linkAlignment-left {
+  justify-content: flex-start;
+}
+
+.linkAlignment-right {
+  justify-content: flex-end;
+}
+
+.linkAlignment-center {
+  justify-content: center;
+}
+
+.list > a {
+  margin: 2% 0;
+  width: calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));
+}
+
+@container (min-width: 320px) {
+  .linkWidth-xs,
+  .linkWidth-s {
+    --columns: 2
+  }
+}
+
+@container (min-width: 500px) {
+  .linkWidth-s,
+  .linkWidth-m,
+  .linkWidth-l,
+  .linkWidth-xl {
+    --gap: 1.5rem;
+  }
+
+  .linkWidth-xs {
+    --columns: 3;
+  }
+}
+
+@container (max-width: 699px) {
+  .linkWidth-m > a {
+    max-width: 300px;
+  }
+}
+
+@container (min-width: 700px) {
+  .linkWidth-s,
+  .linkWidth-m,
+  .linkWidth-l,
+  .linkWidth-xl {
+    --gap: 2rem;
+  }
+
+  .linkWidth-xs {
+    --columns: 4;
+  }
+
+  .linkWidth-s {
+    --columns: 3;
+  }
+
+  .linkWidth-m {
+    --columns: 2;
+  }
+}
+
+@container (min-width: 950px) {
+  .linkWidth-xs {
+    --columns: 5;
+  }
+
+  .linkWidth-s {
+    --columns: 4;
+  }
+
+  .linkWidth-m {
+    --columns: 3;
+  }
+
+  .linkWidth-l {
+    --columns: 2;
+  }
+}
+
+@container (min-width: 1000px) {
+  .linkWidth-xs {
+    --columns: 6;
+  }
+
+  .linkWidth-s {
+    --columns: 5;
+  }
+
+  .linkWidth-m {
+    --columns: 4;
+  }
+
+  .linkWidth-l {
+    --columns: 3;
+  }
+
+  .linkWidth-xl {
+    --columns: 2;
+  }
+}
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/right.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/right.module.css
new file mode 100644
index 0000000000..3c69a9a1cc
--- /dev/null
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/right.module.css
@@ -0,0 +1,88 @@
+.list {
+  display: grid;
+  grid-template-columns: repeat(
+    var(--columns, 1),
+    minmax(0px, var(--column-max-width, 1fr))
+  );
+  column-gap: 1rem;
+  justify-content: center;
+}
+
+.list > a {
+  width: 100%;
+  margin: 2% 0;
+}
+
+@container (max-width: 700px) {
+  .linkWidth-xs {
+    --column-max-width: 350px;
+  }
+}
+
+.linkWidth-s {
+  --column-max-width: 500px;
+}
+
+.linkWidth-l {
+  --column-max-width: 950px;
+}
+
+.linkWidth-s.width-xl.layout-left {
+  justify-content: start;
+}
+
+.linkWidth-s.width-xl.layout-right {
+  justify-content: end;
+}
+
+@container (min-width: 501px) {
+  .linkWidth-xs {
+    --columns: 2;
+  }
+
+  @container (max-width: 749px) {
+    .linkWidth-xs.layout-right:has(> :nth-child(2n + 1):last-child) > :last-child {
+      grid-column-start: 2;
+    }
+  }
+}
+
+@container (min-width: 750px) {
+  .linkWidth-xs {
+    --columns: 3;
+  }
+
+  .linkWidth-xs.layout-right:has(> :nth-child(3n + 1):last-child) > :last-child,
+  .linkWidth-xs.layout-right:has(> :nth-child(3n + 2):last-child) > :last-child {
+    grid-column-start: 3;
+  }
+
+  .linkWidth-xs.layout-right:has(> :nth-child(3n + 2):last-child) > :nth-last-child(2) {
+    grid-column-start: 2;
+  }
+
+  .linkWidth-m {
+    --columns: 2;
+  }
+
+  .linkWidth-m.layout-right:has(> :nth-child(2n + 1):last-child) > :last-child {
+    grid-column-start: 2;
+  }
+
+  @container (max-width: 1000px) {
+    .linkWidth-m.layout-center {
+      --columns: 1;
+      --column-max-width: 700px;
+    }
+  }
+}
+
+@container (min-width: 950px) {
+  .linkWidth-s {
+    --columns: 2;
+  }
+
+  .linkWidth-s.layout-right:has(> :nth-child(2n + 1):last-child) > :last-child {
+    grid-column-start: 2;
+  }
+}
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/linkWidths.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/linkWidths.js
new file mode 100644
index 0000000000..c9298146ae
--- /dev/null
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/linkWidths.js
@@ -0,0 +1,45 @@
+import {contentElementWidths} from 'pageflow-scrolled/frontend';
+
+export const linkWidths = {
+  xs: -2,
+  sm: -1,
+  md: 0,
+  lg: 1,
+  xl: 2,
+  xxl: 3
+}
+
+export function maxLinkWidth({layout, textPosition, width}) {
+  if (layout === 'center' || layout === 'centerRagged') {
+    if (textPosition === 'right') {
+      return {
+        [contentElementWidths.md]: linkWidths.md,
+        [contentElementWidths.lg]: linkWidths.lg,
+        [contentElementWidths.xl]: linkWidths.xl,
+      }[width];
+    }
+    else {
+      return {
+        [contentElementWidths.md]: linkWidths.lg,
+        [contentElementWidths.lg]: linkWidths.xl,
+        [contentElementWidths.xl]: linkWidths.xxl,
+      }[width];
+    }
+  }
+  else {
+    if (textPosition === 'right') {
+      return {
+        [contentElementWidths.md]: linkWidths.sm,
+        [contentElementWidths.lg]: linkWidths.md,
+        [contentElementWidths.xl]: linkWidths.xl,
+      }[width];
+    }
+    else {
+      return {
+        [contentElementWidths.md]: linkWidths.lg,
+        [contentElementWidths.lg]: linkWidths.lg,
+        [contentElementWidths.xl]: linkWidths.xxl,
+      }[width];
+    }
+  }
+}
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js
index 15b15d85df..9fb27a0f9b 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js
@@ -1,5 +1,22 @@
-import '../frontend';
-import {storiesOfContentElement, filePermaId} from 'pageflow-scrolled/spec/support/stories';
+import React from 'react';
+
+import {
+  Entry, RootProviders,
+  contentElementWidths
+} from 'pageflow-scrolled/frontend';
+
+import {
+  linkWidths,
+  maxLinkWidth
+} from './linkWidths';
+
+import {
+  exampleHeading,
+  filePermaId,
+  normalizeAndMergeFixture,
+  storiesOfContentElement
+} from 'pageflow-scrolled/spec/support/stories';
+import {storiesOf} from '@storybook/react';
 
 storiesOfContentElement(module, {
   typeName: 'externalLinkList',
@@ -47,6 +64,19 @@ storiesOfContentElement(module, {
         thumbnailAspectRatio: 'square',
       }
     },
+    {
+      name: 'With thumbnail size',
+      configuration: {
+        textPosition: 'right',
+        thumbnailSize: 'large',
+      }
+    },
+    {
+      name: 'With text size',
+      configuration: {
+        textSize: 'large',
+      }
+    },
     {
       name: 'With inverted content colors',
       configuration: {
@@ -87,3 +117,122 @@ storiesOfContentElement(module, {
   ],
   inlineFileRights: true
 });
+
+[['below', 6], ['right', 3]].forEach(([textPosition, linkCount]) =>
+  storiesOf(`Content Elements/externalLinkList`, module)
+    .add(
+      `Text Position - ${textPosition}`,
+    () => (
+      <RootProviders seed={exampleSeed({textPosition, linkCount})}>
+        <Entry />
+      </RootProviders>
+    )
+  )
+);
+
+function exampleSeed({textPosition, linkCount}) {
+  const sectionConfiguration = {
+    transition: 'scroll'
+  };
+
+  return normalizeAndMergeFixture({
+    sections: [
+      {
+        id: 1,
+        configuration: {
+          ...sectionConfiguration,
+          layout: 'left',
+          backdrop: {
+            color: '#cad2c5'
+          },
+        }
+      },
+      {
+        id: 2,
+        configuration: {
+          ...sectionConfiguration,
+          layout: 'center',
+          backdrop: {
+            color: '#84a98c'
+          },
+        }
+      },
+      {
+        id: 3,
+        configuration: {
+          ...sectionConfiguration,
+          layout: 'right',
+          backdrop: {
+            color: '#52796f'
+          },
+        }
+      }
+    ],
+    contentElements: [
+      ...exampleContentElements(1, 'left', textPosition, linkCount),
+      ...exampleContentElements(2, 'center', textPosition, linkCount),
+      ...exampleContentElements(3, 'right', textPosition, linkCount),
+    ]
+  });
+}
+
+function linkCount({layout, textPosition, width, linkWidth}) {
+  if (textPosition === 'right') {
+    return 3;
+  }
+  else {
+    return range(
+      linkWidths.xs,
+      maxLinkWidth({width, layout, textPosition})
+    ).reverse().indexOf(linkWidth) + 1;
+  }
+}
+
+function exampleContentElements(sectionId, layout, textPosition) {
+  return [
+    exampleHeading({sectionId, text: `Layout ${layout}`}),
+    ...([
+      contentElementWidths.md,
+      contentElementWidths.lg,
+      contentElementWidths.xl
+    ].flatMap(width =>
+      range(
+        linkWidths.xs,
+        maxLinkWidth({width, layout, textPosition})
+      ).map(linkWidth => (
+        {
+          sectionId,
+          typeName: 'externalLinkList',
+          configuration: {
+            textPosition,
+            width,
+            linkWidth,
+            links: links({
+              count: linkCount({layout, textPosition, width, linkWidth})
+            })
+          }
+        }
+      ))
+    ))
+  ];
+}
+
+function range(start, end) {
+  const result = [];
+  for (let i = start; i <= end; i++) {
+    result.push(i);
+  }
+  return result;
+}
+
+function links({count}) {
+  return Array.from({length: count}, (_, index) => (
+    {
+      id: `${index + 1}`,
+      title: `Link ${index + 1}`,
+      url: 'https://www.pageflow.io/',
+      thumbnail: filePermaId('imageFiles', 'turtle'),
+      description: 'This is the description'
+    }
+  ));
+}
diff --git a/entry_types/scrolled/package/src/frontend/__stories__/appearance-stories.js b/entry_types/scrolled/package/src/frontend/__stories__/appearance-stories.js
index 524f0f5401..b231814f5b 100644
--- a/entry_types/scrolled/package/src/frontend/__stories__/appearance-stories.js
+++ b/entry_types/scrolled/package/src/frontend/__stories__/appearance-stories.js
@@ -288,6 +288,6 @@ function exampleSeed(
         exampleTextBlock({sectionId}),
         exampleTextBlock({sectionId}),
       ]).flat()
-    ];s
+    ];
   }
 }