test 4

examples/wrapper-components/react-javascript/src/App.js

@@ -16,7 +16,7 @@ import IconButton from './components/IconButton/IconButton';
 import Tab from './components/Tab/Tab';
 import Tag from './components/Tag/Tag';
 import Switch from './components/Switch/Switch';
-
+import Card from './components/Card/Card';
 
 function App() {
       return (
@@ -33,6 +33,10 @@ function App() {
                   <Button />
                   <br />
 
+                  <h2>Card</h2>
+                  <Card />
+                  <br />
+
                   <h2>Progress Bar</h2>
                   <ProgressBar />
                   <br />

examples/wrapper-components/react-javascript/src/components/Card/Card.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IfxCard, IfxCardHeadline, IfxButton, IfxCardOverline, IfxCardText, IfxCardImage, IfxCardLinks } from '@infineon/infineon-design-system-react';
+
+function Card() {
+  return (
+    <IfxCard href="http://google.com" target="_blank" direction="vertical">
+      <IfxCardImage position="right" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg" alt="" slot="img"></IfxCardImage>
+      <IfxCardOverline>Overline</IfxCardOverline>
+      <IfxCardHeadline>Headline</IfxCardHeadline>
+      <IfxCardText>
+        Some quick example text to build on the card title and make up the bulk of the card's content
+      </IfxCardText>
+      <IfxCardLinks slot="buttons">
+        <IfxButton color='primary'>Button</IfxButton>  
+        <IfxButton color='primary'>Button</IfxButton>  
+      </IfxCardLinks>  
+    </IfxCard>
+  );
+}
+
+export default Card;