Gmdl Cards Entities
Card
- Preview
- Usage
- Definition

import { Card } from '@dinghy/diagrams/entitiesGmdlCards'
<Card/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CARD } from '@dinghy/diagrams/entitiesGmdlCards'
<Shape
{...props}
_style={extendStyle(props, CARD)}
/>
{
_style: {
entity: 'shape=rect;fillColor=#ffffff;strokeColor=none;shadow=1;',
},
_width: 342,
_height: 356,
}
Card 10
- Preview
- Usage
- Definition
import { Card10 } from '@dinghy/diagrams/entitiesGmdlCards'
<Card10/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CARD_10 } from '@dinghy/diagrams/entitiesGmdlCards'
<Shape
{...props}
_style={extendStyle(props, CARD_10)}
/>
{
_style: {
entity: 'dashed=0;shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;fontColor=#000000;fontSize=24;fontStyle=0;verticalAlign=top;spacingBottom=0;spacingLeft=16;spacingTop=15;align=left;',
},
_width: 300,
_height: 224,
}
Card 11
- Preview
- Usage
- Definition

import { Card11 } from '@dinghy/diagrams/entitiesGmdlCards'
<Card11/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CARD_11 } from '@dinghy/diagrams/entitiesGmdlCards'
<Shape
{...props}
_style={extendStyle(props, CARD_11)}
/>
{
_style: {
entity: 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;whiteSpace=wrap;html=1;',
},
_width: 342,
_height: 272,
}
Card 2
- Preview
- Usage
- Definition
import { Card2 } from '@dinghy/diagrams/entitiesGmdlCards'
<Card2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CARD_2 } from '@dinghy/diagrams/entitiesGmdlCards'
<Shape
{...props}
_style={extendStyle(props, CARD_2)}
/>
{
_style: {
entity: 'shape=rect;fillColor=#BDBDBD;strokeColor=#BDBDBD;shadow=1;',
},
_width: 0,
_height: 230,
}
Card 3
- Preview
- Usage
- Definition

import { Card3 } from '@dinghy/diagrams/entitiesGmdlCards'
<Card3/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CARD_3 } from '@dinghy/diagrams/entitiesGmdlCards'
<Shape
{...props}
_style={extendStyle(props, CARD_3)}
/>
{
_style: {
entity: 'shape=rect;fillColor=#BDBDBD;strokeColor=#eeeeee;shadow=1;html=1;',
},
_width: 342,
_height: 378,
}
Card 4
- Preview
- Usage
- Definition

import { Card4 } from '@dinghy/diagrams/entitiesGmdlCards'
<Card4/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CARD_4 } from '@dinghy/diagrams/entitiesGmdlCards'
<Shape
{...props}
_style={extendStyle(props, CARD_4)}
/>
{
_style: {
entity: 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;',
},
_width: 344,
_height: 420,
}
Card 5
- Preview
- Usage
- Definition

import { Card5 } from '@dinghy/diagrams/entitiesGmdlCards'
<Card5/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CARD_5 } from '@dinghy/diagrams/entitiesGmdlCards'
<Shape
{...props}
_style={extendStyle(props, CARD_5)}
/>
{
_style: {
entity: 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;fontColor=#000000;fontSize=23;fontStyle=0;verticalAlign=top;spacingBottom=0;spacingLeft=16;spacingTop=20;align=left;whiteSpace=wrap;html=1;',
},
_width: 342,
_height: 334,
}
Card 6
- Preview
- Usage
- Definition

import { Card6 } from '@dinghy/diagrams/entitiesGmdlCards'
<Card6/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CARD_6 } from '@dinghy/diagrams/entitiesGmdlCards'
<Shape
{...props}
_style={extendStyle(props, CARD_6)}
/>
{
_style: {
entity: 'shape=rect;fillColor=#BDBDBD;strokeColor=#eeeeee;shadow=1;html=1;whiteSpace=wrap;',
},
_width: 342,
_height: 246,
}
Card 7
- Preview
- Usage
- Definition
import { Card7 } from '@dinghy/diagrams/entitiesGmdlCards'
<Card7/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CARD_7 } from '@dinghy/diagrams/entitiesGmdlCards'
<Shape
{...props}
_style={extendStyle(props, CARD_7)}
/>
{
_style: {
entity: 'shape=rect;fillColor=#BDBDBD;strokeColor=none;fontColor=#000000;fontSize=12;fontStyle=0;verticalAlign=middle;spacingBottom=0;spacingLeft=0;shadow=1;whiteSpace=wrap;html=1;',
},
_original_width: 342,
_original_height: 342,
}
Card 8
- Preview
- Usage
- Definition

import { Card8 } from '@dinghy/diagrams/entitiesGmdlCards'
<Card8/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CARD_8 } from '@dinghy/diagrams/entitiesGmdlCards'
<Shape
{...props}
_style={extendStyle(props, CARD_8)}
/>
{
_style: {
entity: 'dashed=0;shape=rect;fillColor=#BDBDBD;strokeColor=none;fontColor=#FFFFFF;fontSize=22;fontStyle=0;verticalAlign=bottom;spacingBottom=48;spacingLeft=0;align=left;spacing=12;gradientColor=#606060;shadow=1;whiteSpace=wrap;html=1;',
},
_width: 342,
_height: 216,
}
Card 9
- Preview
- Usage
- Definition
import { Card9 } from '@dinghy/diagrams/entitiesGmdlCards'
<Card9/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CARD_9 } from '@dinghy/diagrams/entitiesGmdlCards'
<Shape
{...props}
_style={extendStyle(props, CARD_9)}
/>
{
_style: {
entity: 'dashed=0;shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;fontColor=#000000;fontSize=24;fontStyle=0;verticalAlign=top;spacingBottom=0;spacingLeft=16;spacingTop=15;align=left;whiteSpace=wrap;html=1;',
},
_width: 342,
_height: 146,
}
Card Collection
- Preview
- Usage
- Definition
import { CardCollection } from '@dinghy/diagrams/entitiesGmdlCards'
<CardCollection/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CARD_COLLECTION } from '@dinghy/diagrams/entitiesGmdlCards'
<Shape
{...props}
_style={extendStyle(props, CARD_COLLECTION)}
/>
{
_style: {
entity: 'dashed=0;shape=rect;fillColor=#ffffff;strokeColor=none;',
},
_width: 358,
_height: 642,
}
Card collection 2
- Preview
- Usage
- Definition

import { CardCollection2 } from '@dinghy/diagrams/entitiesGmdlCards'
<CardCollection2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CARD_COLLECTION_2 } from '@dinghy/diagrams/entitiesGmdlCards'
<Shape
{...props}
_style={extendStyle(props, CARD_COLLECTION_2)}
/>
{
_style: {
entity: 'dashed=0;shape=rect;fillColor=#ECECEC;strokeColor=none;',
},
_width: 358,
_height: 642,
}
Card with segmented buttons
- Preview
- Usage
- Definition

import { CardWithSegmentedButtons } from '@dinghy/diagrams/entitiesGmdlCards'
<CardWithSegmentedButtons/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CARD_WITH_SEGMENTED_BUTTONS } from '@dinghy/diagrams/entitiesGmdlCards'
<Shape
{...props}
_style={extendStyle(props, CARD_WITH_SEGMENTED_BUTTONS)}
/>
{
_style: {
entity: 'shape=rect;fillColor=#BDBDBD;strokeColor=#eeeeee;shadow=1;',
},
_width: 342,
_height: 522,
}