Create promo tile component for the web

[nilsml]

In order to promote certain content, we need to provide a "promo tile" component

We can use EDS card for this probably.

Acceptance criteria

To be decided by the team

Sub tasks

• [ ] Tailor EDS card for this project
• [ ] Implement in Storybook

[SvSven]

There are some unknowns at the time of writing, but based on what is available now this is "done".

Solving #408 would fix some issues, such as text color when using a dark background. Similarly I'm not sure how the responsive behavior should be. It currently is a single column layout up to 750px width, where it switches to a 2 column layout. We can revisit this when @BirteThornquist is back from holidays same as the issues listed here: https://github.com/equinor/energyvision/issues/351#issuecomment-878241424

[wenche]

We need to figure out how to solve the issue of long button texts. The problem with the EDS button is that it doesn't allow for line wrap. The height is 36px and you are supposed to scale the width.. Do we need a (low) maximum chars?

[wenche]

This is how the promo tiles behaves if the text of the buttons is not of the same length. Should it rather be a 50%? In that case, the length of the link must be very restricted to avoid overflow

Also the button must be bottom aligned as in the cards component.

[wenche]

Example with multiline

[wenche]

The result with aria label

[wenche]

The C2A button link does not have any styles for hover and more yet, will do this as a part of#363

[wenche]

@nicholas-haggerty We tried the approach with 700px fixed height - didn't look good. This is also a bad fit technically with fluid typography. We decided to to instead aim for equal height for all promo tiles within a promo tile group, like in this image. What do you think that approach?

[nicholas-haggerty]

@wenche Looks good. Lets go with that

[wenche]

Great @nicholas-haggerty ! It feels like this is ready for review and acceptance? :thinking_face: I mean, we could go on and on with tiny adjustments but I think it's ready for the next stage

[nicholas-haggerty]

@wenche @BirteThornquist Yup great, I think its good to move. Only issue is the Dark blue background /white text. I cant remember if this is part of a bigger task thats being worked on.

[wenche]

@nicholas-haggerty Yes, part of #408, working on it as we speak, will be done in approx. 5 minutes :)

[wenche]

But still waiting for #363 for the button text and hover effects btw

[wenche]

@nicholas-haggerty Should be OK now, you may see it on the careers page at the bottom

Please feel free to drag this card into "Acceptance" column if it's good enough :)

[nicholas-haggerty]

@wenche Thanks Wenche, virtual high five. Fast work :-)