Design suggestion for reducing the cards size

[Annikenkbrathen]

Description

I’ve been looking at how we can reduce the size of the cards a bit more, as I still find them a bit too large. Our intention was to keep the same size both in edit mode and when not, so I’m suggesting a few changes to maintain the same size regardless of state, while also making them a bit smaller

Design suggestions:

Additional Information

When adding a subform, the sizes will break because the card needs more space the first time it enters edit mode. When the datamodel is added, it can no longer be changed later. Therefore, we can maintain the correct card size when the user clicks edit.

layout for the cards

The whole card should be in size small, buttons too.

display: flex;
width: 300px;
height: 320px;
min-width: 300px;
padding-bottom: var(--size-7, 24px);
flex-direction: column;
align-items: center;
gap: var(--size-0, 0px);
flex-shrink: 0;

Style

border-radius: var(--border-radius-lg, 8px);
border: var(--border-width-default, 1px) solid var(--color-neutral-border-subtle, #B8BCC1);
background: var(--color-neutral-background-default, #FFF);

layout for the "add new" cards

display: flex;
width: 300px;
height: 148px;
min-width: 182.882px;
padding: var(--size-0, 0px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--size-0, 0px);

display: inline-flex;
height: 320px;
flex-direction: column;
align-items: flex-start;
gap: 22px

Style

border-radius: 4.88px;
border: var(--border-width-default, 1px) dashed var(--color-neutral-border-strong, #59626F);
background: #FFF;