Feature Request: V2 Promo/Feature Box

Beta
#1

Hi!

I know that many V2 elements are able to emulate the standard layout of a Feature box. Title, Button, Quote, etc… But I still think that this essential element is missing its own Element.

Classic need is creating a Icon/Image+Title+text+button layout.
The common issue is equal height of elements. I made a little mockup of two boxes, side-by-side:

So the key is that the V2 element allows easy creating of such layouts, with CTA buttons at the end, or with any other ordering, and also makes sure that the elements maintain equal height (This is cross-collumnt thing, so not sure how to pull it off. Maybe the element itself cold have an option to add new Boxes Horizontally).

This element could include a graphic/icon element that also can be placed to different positions, like this one:

By simply turning off the primary image and the Content background, it becomes this:

So the Feature Box has these elements:

  • Image/icon (The primary, big one)
  • Image/Icon (The secondary, small one)
  • Headline (With selectable H tags and a subheadline option)
  • Text area with a rich text editor
  • Button

It also should have options to rearrange things both horizontally and vertically inside an individual feature Box. Animation particles would be also cool, and hover effects where for example a primary and secondary image are moving around. If we pair this with the new powerful Grid element, we basically have many Essential Grid/The Grid use cases covered.

I believe that such element would be very welcome for many users, especially those who are not proficient with CSS/Flexbox.

Thanks!

3 Likes
#2

I’ll second this, especially liking the idea of a primary/secondary image.

I think it would be possible to create a column preset (with associated child elements) but overall, I think this feature box would be a much more elegant solution

1 Like
#3

Interesting concept here. It’s almost another take on the Card, but with more graphical options and no flip behavior.

If the equal heights across columns is a primary concern, I think this would be best solved as a Column preset like Scot pointed out. By enabling Flex Layout on a Column and using “space around” you can get proportionate spacing. For example, the buttons will always align at the bottom regardless of the length of your copy. Arbitrarily rearranging elements is also a challenge. We could have a few presets in a choose control, but there wouldn’t be free control to re-order elements. This is only possible by placing elements directly in a column.

Something noteworthy about this release is that presets now include child elements. You can save a column Preset and when you apply it if “Replace Content” is checked you will get all the contained elements as well.

As our primary goal was feature parity, we own’t be building an element like this for the this release but we will certainly keep this under consideration, and can take another look as more feedback comes in.

1 Like
#4

Got it. I usually do this by doing it as a column, but now with the option to save the preset makes it really easy.

I have tried the Space Around on the column and that is not the layout that would work with this, as all elements need to be aligned to the top, except the button that should be alone sticking to the bottom. Some kind of native self-flex function on individual elements would be a great thing!

1 Like
#5

Gotcha! Makes sense on the space-between issue. This gets a bit more complicated but you could add another Row element with a single Column at the end to create a new positioning context for the Button. I don’t think we could add self flex to everything because they could potentially not be placed inside of a flexbox context (old columns) and we don’t have a way to easily detect that.

#6

Thanks!

I have changed the margin-top of the button to auto, and it instantly pushed it to the bottom.

Since the column can now be saved with all the content, that is as good as the new element! :slight_smile: :thumbsup:

Fantastic update. One of the best, if not the best one. Until the next cycle, that is. :wink:

1 Like
#7

Thanks Misho! :smiley:

1 Like