Two Column Layout Component: Difference between revisions

Latest revision as of 13:10, 10 July 2026

The Two Column Layout component allows you to display two components side by side. The Two Column Layout component can only be used in the Full Width Page Content region.

Only the following components can be placed inside a Two Column Layout component:

Elements

The Two Column Layout component does not contain any fields of its own. Instead, it serves as a container for the components placed within its two columns.

Examples

Interactive Example

The preview below shows the Two Column Layout component using its default configuration.

To experiment with different layouts and supported components, open the interactive component playground.

Open Component Playground

Step-by-step Instructions

Add one of the supported components to either column.
Add a second supported component to the remaining column.

@@ Line 1: / Line 1: @@
-The '''''Two Column Layout''''' component allows you to display two components alongside on another. The '''''Two Column Layout''''' component can only be used in the Full Width page region. Only a select handful of components are allowed within a '''''Two Column Layout''''' component:
+{{DrupalBack}}
+The '''Two Column Layout''' component allows you to display two components side by side. The '''Two Column Layout''' component can only be used in the '''Full Width Page Content''' region.
+Only the following components can be placed inside a '''Two Column Layout''' component:
 * [[Events Calendar Feed Component|Events Calendar Feed]]
@@ Line 8: / Line 11: @@
 == Elements ==
-The '''''Two Column Layout''''' does not contain any specific element apart from the components placed in columns.
+The '''Two Column Layout''' component does not contain any fields of its own. Instead, it serves as a container for the components placed within its two columns.
 == Examples ==
+{{Callout|type=tip|title=Interactive Example|content=The preview below shows the Two Column Layout component using its default configuration.
+To experiment with different layouts and supported components, open the interactive component playground.
+'''[https://toolkit.swarthmore.edu/?path=/story/swarthmore-theme-components-two-column-layout Open Component Playground]'''}}
 {{StorybookComponent|id=swarthmore-theme-components-two-column-layout}}
 == Step-by-step Instructions ==
-# Add a component from the list of available options to one of the '''''Columns'''''.
+# Add one of the supported components to either column.
 ## [[Events Calendar Feed Component|Events Calendar Feed]]
 ## [[Feature Link List Component|Feature Link List]]
 ## [[News Feed Component|News Feed]]
 ## [[RSS Feed Component|RSS Feed]]
-# Add the second component to the other column.
+# Add a second supported component to the remaining column.
 [[Category:Drupal]]
-<!-- Imported from Confluence page id=176095265 (https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/176095265/Two+Column+Layout+Component) -->