2 files changed, 15 insertions, 1 deletions

diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index 53ed16341..1a442a733 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -15,6 +15,7 @@ interface IProps extends IWithStyle {
   ctaLabel?: string;
   ctaLoading?: boolean;
   children: React.ReactNode;
+  className: string;
 }
 
 interface IState {
@@ -138,6 +139,7 @@ class InfoboxComponent extends Component<IProps, IState> {
       ctaLoading,
       ctaOnClick,
       dismissable,
+      className,
     } = this.props;
 
     const {
@@ -150,7 +152,10 @@ class InfoboxComponent extends Component<IProps, IState> {
     }
 
     return (
-      <div className={classes.wrapper}>
+      <div className={classnames({
+        [classes.wrapper]: true,
+        [`${className}`]: className,
+      })}>
         <div
           className={classnames({
             [classes.infobox]: true,
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx
index 2a5e8b0d5..144855376 100644
--- a/uidev/src/stories/infobox.stories.tsx
+++ b/uidev/src/stories/infobox.stories.tsx
@@ -10,6 +10,7 @@ interface IStoreArgs {
   ctaLabel?: string;
   type?: string;
   dismissable?: boolean;
+  className?: string;
 }
 
 const createStore = (args?: IStoreArgs) => {
@@ -29,6 +30,7 @@ const WithStoreInfobox = observer(({ store, children }: { store: any, children:
       type={store.type}
       ctaOnClick={store.ctaOnClick}
       dismissable={store.dismissable}
+      className={store.className}
     >
       {children}
     </Infobox>
@@ -123,4 +125,11 @@ storiesOf('Infobox')
     >
       Welcome to the world of tomorrow
     </WithStoreInfobox>
+  ))
+  .add('With className', () => (
+    <WithStoreInfobox store={createStore({
+      className: 'franz-is-awesome',
+    })}>
+      Welcome to the world of tomorrow
+    </WithStoreInfobox>
   ));