Enhancement: calcite-card has horizontal layout mode

[mjuniper]

Description

Horizontal layout mode of calcite card so you can get a layout with the thumbnail adjacent to the main content like this:

Acceptance Criteria

Relevant Info

Maybe it takes a layout attribute with a value of horizontal or something.

Which Component

calcite-card

Example Use Case

[ajturner]

@benelan curious about "Freezer" in terms of timeline. We need to know if we could submit PR to calcite-components to add functionality like this or should be building our own Hub card in the meantime.

[mjuniper]

I took a quick stab at this and came up with this:

I don't have push access to this repo and it sounds like we will want to go through a design process for this but the branch is here.

[macandcheese]

I almost wonder if a thumbnail-position:inline-start,inline-end,block-start,block-end property (defaulting to the current block-start) would be the way to go here. It would allow for the above, along with other alignments that might be needed?

[macandcheese]

@benelan see above for a potential update to the issue framing.

[macandcheese]

Re-adding to triage list for this week.

[macandcheese]

This should be simple to update with a ‘thumbnail-position’ (or substitute of a prop name) option with the values listed above (defaulting to current behavior) to provide solution for multiple use cases.

Thoughts @asangma @mitc7862 ?

[asangma]

@macandcheese @benelan I can put together a couple designs. I know some of my designer colleagues would have some use for the same layout.

[macandcheese]

Sure, I think the card content and slot alignment itself can stay as is: just positioning the thumbnail at the values mentioned above (top, bottom, start, end) would let folks achieve “horizontal” cards as well as some other layouts.

[asangma]

updated

Ehyo! Here are some designs.

Thumbnail in the start position

Thumbnail in the end position

Thumbnail in the bottom position

Checkbox position

As you can see, in the bottom position, the checkbox for selectable probably needs to be moved. That might mean an adjustment to something like this.

Checkbox paired with heading

No title or subtitle

Maybe at least title is required and made into a prop?

[macandcheese]

Looks good - I think we'll need to validate the chosen width (40%). For the thumbnail-position:bottom - I think it should go beneath the footer as that is more consistent with the prop naming / other displays.

I am happy to make the title required. If we do that I'd like to have a summary / description as well, as optional, to encourage consistent lockups.

[asangma]

Copy that. I'm cool with tweaking the thumbnail percentage. Open to suggestions.

[asangma]

Updated bottom position design. ⬆️

[asangma]

If we do that I'd like to have a summary / description as well, as optional, to encourage consistent lockups.

Should I take this to mean that title is required and summary/description is optional?

[macandcheese]

Users often use the subtitle slot for a rich lockup like [icon][text][link] so maybe we can keep that as slot. A title has little justification for having content besides text content aside from being used as a link (which might be the only use case we would lose by turning title into a required string).

[mjuniper]

FWIW we currently use the title slot so we can make it a link.

[asangma]

Update. Add the background-color to the thumbnail container so that if the content is taller than the thumbnail, it looks like this.

[asangma]

@macandcheese Thinking more on the designs and discussing with @eriklharper, this design seemed better and more robust. The checkbox is moved from positioned on the thumbnail to next to the heading. Yeah?

[macandcheese]

Agree

[FelFly]

Hello - This issue was shared with me because we're redoing our cards and currently wrestling with image thumbnails aspect ratios. Glancing at the mocks above, which mostly seem to feature a square image similar to the 1:1 group thumbnail, is the pattern for the 3:2 item thumbnail what I see on Alan's post, where underneath the image is essentially white space?

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

Verified in beta.83 using the thumbnail-position attribute.

Values include: block-end, block-start (default), inline-end, and inline-start.

Example with inline-start: