Third Card Heading

Third card subhead

Sample text in the limited wysiwyg.

Fourth Card Heading

Fourth card subhead

Sample text in the limited wysiwyg.

Overall Change

We are removing the margin-top on the headline field, and adding margin (bottom or top or left or right) to the icon span depending on whether it is placed before or after the text box.

 

Horizontal spacing / alignment of cards

(On Widget)

4 cards in the main body column look and function just fine. But what if we have 3 cards, or 5 cards?

To control the horizontal spacing/alignment of the FF cards, we can allow the site builder to select the 'justify-content' property of the parent. Ideally this would be a dropdown of choices:

  • center (this is default, and currently the only option)
  • flex-start
  • flex-end
  • space-around
  • space-between
  • space-evenly

Width of cards

(On Widget)

The site builder may wish to adjust the size (width) of the cards so that, if they have 5 cards, maybe 3 are on the top line and 2 are on the bottom. We can offer some visual options by adjusting the flex-basis property of the child elements. Preset options might be best, set at values of 25% (current default for 4 cards) 33% and 50%. (all these should be calc values to account for margins. see inspector.)

flex-basis: calc(25% - 10px);

flex-basis: calc(33% - 10px);

flex-basis: calc(50% - 10px);

Stacking cards vertically

(On Widget)

Sometimes it might be appropriate to stack cards vertically (similar to how they are displayed on mobile). A good example might be a 6-6 column split, with the cards on the left and some text on the right. This an be achieved by allowing the site builder to select whether or not the cards go full width in their container. On the code side, we'll simply adjust the flex-basis property of the child elements (cards).

Changing the text alignment

(Per Card)

We can allow the site builder to adjust the text-align property on the .factBoxInner element.

NOTE: We are leaning towards setting this alignment property to affect ALL text fields, and not allow the user to change alignment field by field. In other words, the Title field cannot be right justified at the same time as the subheader is left justified. 

Changing the icon justification

(Per Card)

This is where it gets a little tricky. If we align the text right, the icon looks a little suspect. In order to adjust that, we'll need to remove the margin on the ::before element (margin:initial;) and that allows us to then set the justify-content property on the parent (.t-factIcon). 

Changing the spacing of card elements

(Per Card)

Allow the user to set the justify-content property of the parent (anchor for linked cards). Default should be center. 

Changing the order of card elements

(Per Card)

The main user request here is moving the icon within the card. Given the current structure, we won't be able to place the icon in between lines of text. However we can move the icon to appear after the text elements in the card by adjusting the order property.

By default, icon is first and card elements are vertical. In this case, icon has margin-bottom 10px. If the icon comes after the text, margin bottom will be removed, and margin top of 15px is added.

If the user changes the card elements to layout horizontally, the margin right will be:     . If the icon is placed after the text, the margin right will be removed, and the margin left will be:

Display card elements horizontally

(Per card)

Lets use the 6-6 column for this example, and also set the flex-basis of the children to be 100%. Two of these cards are links, and the other two are not. For the non-link items, we can change the flex-direction property to 'row'. The margin on the headline field is giving us issues, so we will need be able to adjust that. (Another approach might be to simply allow font-sizing option in the paragraph text field. Currently only the headline and subhead fields allow this. Since this field contains no margin, it might be best.) For now, let's just remove the margin from the headline field, since the visual result would be the same.

Right now, the non-link cards are looking good, but if we hover over the anchors in the linked cards, we'll need to make an adjustment. Lets adjust the flex-basis property of the anchor to :calc(100% + 30px). The calc will account for margins. Now we have linked, and non-linked cards looking visually consistent.

Remove margin-bottom on icon span. Set flex basis of icon span to 35%. Set flex basis of text box to 65%. Flex grow on both of these elements should be set to 1 when horizontal, to allow growth of text box if no icon is used.

If site builder changes card layout to horizontal, AND had chosen to align the icon (on vertical layout it's left, right, center options that change the justify content property), then it becomes a vertical alignment here with options like (top, center, bottom) that change the align-items property. 

CMS Login