diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
index 968ba22df..cbfb635b9 100644
--- a/src/components/Accordion/Accordion.stories.tsx
+++ b/src/components/Accordion/Accordion.stories.tsx
@@ -1,9 +1,13 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { List } from '../List';
-import { IconName } from '../Icon';
 import { Accordion, AccordionProps, AccordionSize, AccordionShape } from './';
+import { Button, ButtonShape, ButtonVariant } from '../Button';
+import { Badge } from '../Badge';
+import { IconName } from '../Icon';
+import Layout from '../Layout';
+import { List } from '../List';
+import { Stack } from '../Stack';
 
 export default {
   title: 'Accordion',
@@ -85,15 +89,27 @@ const listItems: AccordionProps[] = [
   },
 ];
 
+const buttons = [0, 1].map((i) => ({
+  ariaLabel: `Button ${i}`,
+  disruptive: i === 0 ? false : true,
+  icon: i === 0 ? IconName.mdiCogOutline : IconName.mdiDeleteOutline,
+  variant: i === 0 ? ButtonVariant.Neutral : ButtonVariant.Secondary,
+}));
+
 const Single_Story: ComponentStory<typeof Accordion> = (args) => (
   <Accordion {...args} />
 );
 
 const List_Story: ComponentStory<typeof List> = (args) => <List {...args} />;
 
+const Custom_Story: ComponentStory<typeof Accordion> = (args) => (
+  <Accordion {...args} />
+);
+
 export const Single = Single_Story.bind({});
 export const List_Vertical = List_Story.bind({});
 export const List_Horizontal = List_Story.bind({});
+export const Custom = Custom_Story.bind({});
 
 // Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports,
 // this line ensures they are exported in the desired order.
@@ -102,6 +118,7 @@ export const __namedExportsOrder = [
   'Single',
   'List_Vertical',
   'List_Horizontal',
+  'Custom',
 ];
 
 Single.args = {
@@ -179,3 +196,92 @@ List_Horizontal.args = {
     padding: '8px',
   },
 };
+
+Custom.args = {
+  children: (
+    <>
+      <div style={{ height: 'auto' }}>
+        Icons are optional for accordions. The body area in the expanded view is
+        like a modal or a slide-in panel. You can put any smaller components
+        inside to build a layout.
+      </div>
+    </>
+  ),
+  id: 'myAccordionId',
+  expandButtonProps: null,
+  expandIconProps: {
+    path: IconName.mdiChevronDown,
+  },
+  configContextProps: {
+    noGradientContext: false,
+    noThemeContext: false,
+  },
+  theme: '',
+  themeContainerId: 'my-accordion-theme-container',
+  gradient: false,
+  headerProps: {
+    fullWidth: true,
+    style: { gap: '8px' },
+  },
+  summary: (
+    <Layout octupleStyles>
+      {' '}
+      {/* octupleStyles enables scoped Octuple BEM. */}
+      <Stack
+        fullWidth
+        direction="horizontal"
+        flexGap="m"
+        justify="space-between"
+        wrap="wrap"
+      >
+        <Stack direction="vertical" flexGap="xxxs">
+          <h4
+            className="octuple-h4"
+            style={{
+              alignSelf: 'center',
+              flexWrap: 'nowrap',
+              margin: 0,
+              whiteSpace: 'nowrap',
+            }}
+          >
+            Accordion Header <Badge style={{ margin: '0 8px' }}>2</Badge>
+          </h4>
+          <div
+            className="octuple-content"
+            style={{ color: 'var(--grey-tertiary-color)', fontWeight: 400 }}
+          >
+            Supporting text
+          </div>
+        </Stack>
+        <Stack
+          align="center"
+          direction="horizontal"
+          flexGap="m"
+          justify="flex-end"
+          style={{ width: 'min-content' }}
+        >
+          <List
+            items={buttons}
+            layout="horizontal"
+            listStyle={{ display: 'flex', gap: '8px' }}
+            renderItem={(item) => (
+              <Button
+                ariaLabel={item.ariaLabel}
+                disruptive={item.disruptive}
+                iconProps={{ path: item.icon }}
+                onClick={(e) => e.preventDefault()} // prevent accordion toggle, then apply your own logic.
+                shape={ButtonShape.Round}
+                variant={item.variant}
+              />
+            )}
+          />
+        </Stack>
+      </Stack>
+    </Layout>
+  ),
+  bordered: true,
+  shape: AccordionShape.Pill,
+  size: AccordionSize.Large,
+  expanded: false,
+  disabled: false,
+};
diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx
index 088be8798..c03448d30 100644
--- a/src/components/Accordion/Accordion.test.tsx
+++ b/src/components/Accordion/Accordion.test.tsx
@@ -3,7 +3,12 @@ import Enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { Accordion, AccordionProps, AccordionShape, AccordionSize } from './';
+import { Button, ButtonShape, ButtonVariant } from '../Button';
+import { Badge } from '../Badge';
 import { IconName } from '../Icon';
+import Layout from '../Layout';
+import { List } from '../List';
+import { Stack } from '../Stack';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -54,6 +59,13 @@ const accordionProps: AccordionProps = {
   'data-testid': 'test-accordion',
 };
 
+const buttons = [0, 1].map((i) => ({
+  ariaLabel: `Button ${i}`,
+  disruptive: i === 0 ? false : true,
+  icon: i === 0 ? IconName.mdiCogOutline : IconName.mdiDeleteOutline,
+  variant: i === 0 ? ButtonVariant.Neutral : ButtonVariant.Secondary,
+}));
+
 describe('Accordion', () => {
   beforeAll(() => {
     matchMedia = new MatchMediaMock();
@@ -135,4 +147,77 @@ describe('Accordion', () => {
     expect(container.querySelector('.rectangle')).toBeTruthy();
     expect(container).toMatchSnapshot();
   });
+
+  test('Accordion renders custom content', () => {
+    const { container } = render(
+      <Accordion
+        {...accordionProps}
+        expanded={true}
+        headerProps={{
+          fullWidth: true,
+          style: { gap: '8px' },
+        }}
+        size={AccordionSize.Medium}
+        summary={
+          <Layout octupleStyles>
+            <Stack
+              fullWidth
+              direction="horizontal"
+              flexGap="m"
+              justify="space-between"
+              wrap="wrap"
+            >
+              <Stack direction="vertical" flexGap="xxxs">
+                <h4
+                  className="octuple-h4"
+                  style={{
+                    alignSelf: 'center',
+                    flexWrap: 'nowrap',
+                    margin: 0,
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  Accordion Header <Badge style={{ margin: '0 8px' }}>2</Badge>
+                </h4>
+                <div
+                  className="octuple-content"
+                  style={{
+                    color: 'var(--grey-tertiary-color)',
+                    fontWeight: 400,
+                  }}
+                >
+                  Supporting text
+                </div>
+              </Stack>
+              <Stack
+                align="center"
+                direction="horizontal"
+                flexGap="m"
+                justify="flex-end"
+                style={{ width: 'min-content' }}
+              >
+                <List
+                  items={buttons}
+                  layout="horizontal"
+                  listStyle={{ display: 'flex', gap: '8px' }}
+                  renderItem={(item) => (
+                    <Button
+                      ariaLabel={item.ariaLabel}
+                      disruptive={item.disruptive}
+                      iconProps={{ path: item.icon }}
+                      onClick={(e) => e.preventDefault()}
+                      shape={ButtonShape.Round}
+                      variant={item.variant}
+                    />
+                  )}
+                />
+              </Stack>
+            </Stack>
+          </Layout>
+        }
+      />
+    );
+    expect(() => container).not.toThrowError();
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index a75b19db9..0234db6dc 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -29,24 +29,27 @@ import styles from './accordion.module.scss';
 import themedComponentStyles from './accordion.theme.module.scss';
 
 export const AccordionSummary: FC<AccordionSummaryProps> = ({
+  badgeProps,
   children,
+  classNames,
+  disabled,
   expandButtonProps,
-  expandIconProps,
   expanded,
-  onClick,
-  classNames,
+  expandIconProps,
+  fullWidth = false,
   gradient,
-  id,
   iconProps,
-  badgeProps,
+  id,
+  onIconButtonClick,
+  onClick,
   size,
-  disabled,
   ...rest
 }) => {
   const headerClassnames = mergeClasses([
     styles.accordionSummary,
     classNames,
     {
+      [styles.accordionSummaryFullWidth]: fullWidth,
       [styles.medium]: size === AccordionSize.Medium,
       [styles.large]: size === AccordionSize.Large,
       [styles.accordionSummaryExpanded]: expanded,
@@ -54,16 +57,19 @@ export const AccordionSummary: FC<AccordionSummaryProps> = ({
     },
   ]);
 
-  const iconStyles: string = mergeClasses([
-    styles.accordionIcon,
+  const iconButtonClassNames: string = mergeClasses([
+    styles.accordionIconButton,
     // Conditional classes can also be handled as follows
-    { [styles.expandedIcon]: expanded },
+    { [styles.expandedIconButton]: expanded },
   ]);
 
   // to handle enter press on accordion header
   const handleKeyDown = useCallback(
     (event) => {
-      event.key === eventKeys.ENTER && onClick?.(event);
+      if (event.key === eventKeys.ENTER || event.key === eventKeys.SPACE) {
+        event.preventDefault();
+        onClick?.(event);
+      }
     },
     [onClick]
   );
@@ -89,9 +95,12 @@ export const AccordionSummary: FC<AccordionSummaryProps> = ({
         {...expandButtonProps}
         disabled={disabled}
         gradient={gradient}
-        iconProps={{ classNames: iconStyles, ...expandIconProps }}
+        iconProps={{ classNames: iconButtonClassNames, ...expandIconProps }}
+        onClick={onIconButtonClick}
+        onKeyDown={handleKeyDown}
         shape={ButtonShape.Round}
         variant={gradient ? ButtonVariant.Secondary : ButtonVariant.Neutral}
+        {...expandButtonProps}
       />
     </div>
   );
@@ -215,6 +224,7 @@ export const Accordion: FC<AccordionProps> = React.forwardRef(
             gradient={gradient}
             iconProps={iconProps}
             id={id}
+            onIconButtonClick={() => toggleAccordion(!isExpanded)}
             onClick={() => toggleAccordion(!isExpanded)}
             size={size}
             {...headerProps}
diff --git a/src/components/Accordion/Accordion.types.ts b/src/components/Accordion/Accordion.types.ts
index 2aa6e938c..a2cc0c267 100644
--- a/src/components/Accordion/Accordion.types.ts
+++ b/src/components/Accordion/Accordion.types.ts
@@ -16,6 +16,11 @@ export enum AccordionSize {
 }
 
 interface AccordionBaseProps extends OcBaseProps<HTMLDivElement> {
+  /**
+   * If the accordion is bordered or not
+   * @default true
+   */
+  bordered?: boolean;
   /**
    * Configure how contextual props are consumed
    */
@@ -43,16 +48,17 @@ interface AccordionBaseProps extends OcBaseProps<HTMLDivElement> {
    * @default false
    */
   gradient?: boolean;
+  /**
+   * The onClick callback for the accordion.
+   * @param event
+   * @returns
+   */
+  onIconButtonClick?: React.MouseEventHandler<HTMLButtonElement>;
   /**
    * Shape of the accordion
    * @default AccordionShape.Pill
    */
   shape?: AccordionShape;
-  /**
-   * If the accordion is bordered or not
-   * @default true
-   */
-  bordered?: boolean;
   /**
    * Size of the accordion
    * @default AccordionSize.Large
@@ -108,6 +114,10 @@ export interface AccordionSummaryProps
    * Badge props for the header badge
    */
   badgeProps?: BadgeProps;
+  /**
+   * Whether the accordion summary is full width or not.
+   */
+  fullWidth?: boolean;
 }
 
 export interface AccordionBodyProps
diff --git a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
index 4bd1ee8de..80ee534cf 100644
--- a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
+++ b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -50,7 +50,7 @@ exports[`Accordion Accordion is large 1`] = `
       >
         <span
           aria-hidden="false"
-          class="icon accordion-icon icon-wrapper"
+          class="icon accordion-icon-button icon-wrapper"
           role="presentation"
         >
           <svg
@@ -136,7 +136,7 @@ exports[`Accordion Accordion is medium 1`] = `
       >
         <span
           aria-hidden="false"
-          class="icon accordion-icon icon-wrapper"
+          class="icon accordion-icon-button icon-wrapper"
           role="presentation"
         >
           <svg
@@ -222,7 +222,7 @@ exports[`Accordion Accordion is not bordered 1`] = `
       >
         <span
           aria-hidden="false"
-          class="icon accordion-icon icon-wrapper"
+          class="icon accordion-icon-button icon-wrapper"
           role="presentation"
         >
           <svg
@@ -308,7 +308,7 @@ exports[`Accordion Accordion is pill shaped 1`] = `
       >
         <span
           aria-hidden="false"
-          class="icon accordion-icon icon-wrapper"
+          class="icon accordion-icon-button icon-wrapper"
           role="presentation"
         >
           <svg
@@ -394,7 +394,7 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
       >
         <span
           aria-hidden="false"
-          class="icon accordion-icon icon-wrapper"
+          class="icon accordion-icon-button icon-wrapper"
           role="presentation"
         >
           <svg
@@ -430,6 +430,187 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
 </div>
 `;
 
+exports[`Accordion Accordion renders custom content 1`] = `
+<div>
+  <div
+    class="accordion-container accordion-border pill"
+    data-testid="test-accordion"
+  >
+    <div
+      aria-controls="myAccordionId-content"
+      aria-expanded="true"
+      class="accordion-summary accordion-summary-full-width medium accordion-summary-expanded"
+      id="myAccordionId-header"
+      role="button"
+      style="gap: 8px;"
+      tabindex="0"
+    >
+      <div
+        class="accordion-header-container"
+      >
+        <span
+          aria-hidden="false"
+          class="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style="width: 20px; height: 20px;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
+              style="fill: green;"
+            />
+          </svg>
+        </span>
+        <span
+          class="accordion-header"
+        >
+          <div
+            class="octuple layout"
+          >
+            <div
+              class="stack full-width horizontal undefined gap-m"
+              style="justify-content: space-between; flex-wrap: wrap;"
+            >
+              <div
+                class="stack vertical undefined gap-xxxs"
+              >
+                <h4
+                  class="octuple-h4"
+                  style="align-self: center; flex-wrap: nowrap; margin: 0px; white-space: nowrap;"
+                >
+                  Accordion Header 
+                  <span
+                    class="badge badge-medium"
+                    style="margin: 0px 8px;"
+                  >
+                    2
+                  </span>
+                </h4>
+                <div
+                  class="octuple-content"
+                  style="font-weight: 400;"
+                >
+                  Supporting text
+                </div>
+              </div>
+              <div
+                class="stack horizontal undefined gap-m"
+                style="align-items: center; justify-content: flex-end;"
+              >
+                <div>
+                  <ul
+                    class="list-container"
+                    style="display: flex; gap: 8px;"
+                  >
+                    <li
+                      class="list-item"
+                    >
+                      <button
+                        aria-disabled="false"
+                        aria-label="Button 0"
+                        class="button button-neutral button-medium round-shape icon-left"
+                      >
+                        <span
+                          aria-hidden="false"
+                          class="icon icon-wrapper"
+                          role="presentation"
+                        >
+                          <svg
+                            role="presentation"
+                            style="width: 20px; height: 20px;"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"
+                              style="fill: currentColor;"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </li>
+                    <li
+                      class="list-item"
+                    >
+                      <button
+                        aria-disabled="false"
+                        aria-label="Button 1"
+                        class="button button-secondary button-secondary-disruptive button-medium round-shape icon-left"
+                      >
+                        <span
+                          aria-hidden="false"
+                          class="icon icon-wrapper"
+                          role="presentation"
+                        >
+                          <svg
+                            role="presentation"
+                            style="width: 20px; height: 20px;"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19M8,9H16V19H8V9M15.5,4L14.5,3H9.5L8.5,4H5V6H19V4H15.5Z"
+                              style="fill: currentColor;"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </span>
+        <span
+          class="badge badge-medium badge"
+        >
+          2
+        </span>
+      </div>
+      <button
+        aria-disabled="false"
+        class="button button-neutral button-medium round-shape icon-left"
+      >
+        <span
+          aria-hidden="false"
+          class="icon accordion-icon-button expanded-icon-button icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style="width: 20px; height: 20px;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <div
+      aria-labelledby="myAccordionId-header"
+      class="accordion-body-container show"
+      id="myAccordionId-content"
+      role="region"
+    >
+      <div
+        class="accordion-body show border-top medium"
+      >
+        <div
+          style="height: auto;"
+        >
+          Icons are optional for accordions. The body area in the expanded view is like a modal or a slide-in panel. You can put any smaller components inside to build a layout.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Accordion Renders without crashing 1`] = `
 <div>
   <div
@@ -480,7 +661,7 @@ exports[`Accordion Renders without crashing 1`] = `
       >
         <span
           aria-hidden="false"
-          class="icon accordion-icon icon-wrapper"
+          class="icon accordion-icon-button icon-wrapper"
           role="presentation"
         >
           <svg
diff --git a/src/components/Accordion/accordion.module.scss b/src/components/Accordion/accordion.module.scss
index 517a3b83d..49fc06399 100644
--- a/src/components/Accordion/accordion.module.scss
+++ b/src/components/Accordion/accordion.module.scss
@@ -1,6 +1,7 @@
 .accordion-container {
   font-family: var(--accordion-font-family);
   overflow: hidden;
+  min-width: fit-content;
 
   &.accordion-border {
     border: var(--accordion-border);
@@ -59,10 +60,12 @@
   }
 
   .accordion-summary {
+    align-items: center;
     background: var(--accordion-summary-background-color);
     color: var(--accordion-summary-text-color);
     cursor: pointer;
     display: flex;
+    gap: $space-s;
     justify-content: space-between;
     width: 100%;
     transition: background-color $motion-duration-fast $motion-easing-easeout;
@@ -99,8 +102,15 @@
     }
 
     .accordion-header-container {
-      display: flex;
       align-items: center;
+      display: flex;
+    }
+
+    &-full-width {
+      .accordion-header-container,
+      .accordion-header {
+        flex: 1;
+      }
     }
 
     &:focus,
@@ -121,10 +131,10 @@
     }
   }
 
-  .accordion-icon {
+  .accordion-icon-button {
     transition: transform $motion-duration-fast;
 
-    &.expanded-icon {
+    &.expanded-icon-button {
       transform: rotate(180deg);
     }
   }
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 39491800d..6678b6b24 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -29,6 +29,7 @@ export const List = <T extends any>({
   itemClassNames,
   itemStyle,
   listClassNames,
+  listStyle,
   listType = 'ul',
   role,
   itemProps,
@@ -251,13 +252,13 @@ export const List = <T extends any>({
     <div {...rest} className={classNames} style={style}>
       {getHeader()}
       {listType === 'ul' && (
-        <ul role={role} className={containerClasses}>
+        <ul role={role} className={containerClasses} style={{ ...listStyle }}>
           {getItems()}
           {!!renderAdditionalItem && getAdditionalItem()}
         </ul>
       )}
       {listType === 'ol' && (
-        <ol role={role} className={containerClasses}>
+        <ol role={role} className={containerClasses} style={{ ...listStyle }}>
           {getItems()}
           {!!renderAdditionalItem && getAdditionalItem()}
         </ol>
diff --git a/src/components/List/List.types.ts b/src/components/List/List.types.ts
index a23dc91a2..c696e4597 100644
--- a/src/components/List/List.types.ts
+++ b/src/components/List/List.types.ts
@@ -58,6 +58,10 @@ export interface ListProps<T> extends OcBaseProps<HTMLDivElement> {
    * Custom classes for the list.
    */
   listClassNames?: string;
+  /**
+   * Style of the list
+   */
+  listStyle?: React.CSSProperties;
   /**
    * The list html type.
    * @default ul