How does the Simple List Component work? Let's look at spacing

Lists are achieved using either a Text Component or the the Simple List Component.

By using the Simple List Component you get additional Styling Options. For example, multiple columns, bullets, accessability features, checkmarks, icons etc.

This is a text component and below this text component is a Simple List component. Let's look at how spacing is handeled when using a Simple List Component.

This is another text component below the Simple List componet above. Notice there is A LOT of spacing above and below the Simple List component. 

KEEP IN MIND that spacing is DIFFERENT when you place a Simple List under different components.

For example below we have a Heading Component followed by a Simple List Component. There doesn't appear to be as much spacing,

Bullets story: 3 Column Bulleted Style

Checkmarks story: 2 Column Check Mark Style

Here is another example of a Simple List using the 2 column, check mark style appled. 

Checkbox story: 1 Column, Check Box and A11y Option Style applied

The above Simple List Component has the Box Style and the "Back to Top" Accessability feature applied. You can't see it in Preview, but I can share in Author. When you have the "Back to Top" feature checked, I believe it adds even more space BELOW the simple list.

Pipes story: Simple List Using Pipes Style

Here's an image showing the components used above - perhaps this helps give a visual on the spacing applied to components?

Now lets see how Lists are handled in a TEXT component

This is a Text Component. Let's see how the spacing is handeled for lists within a text component.

  • Here is a list 
  • In this list I have 5 bullets
  • This is bullet number 3
  • And here's yet another bullet I have listed
  • Lastly here's bullet #5

This is simply more text after a bulleted list in a Text Component. This shows how spacing looks for lists within a Text Component. I'm guessing we would want consisitancy in spacing, regardless if you use a list within a Text Component or a Simple List component.

Here's just another heading

Again the only advantage of using a Simple List component is you get additional Styling Options. You can have multiple columns, bullets, numbers, checkmarks and boxes, etc. Here's a screen shot of some of the sytling options within a Simple List component. When using the text component you only get a single column and numbers or bullets. 

Numbered list within a Text Component

  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Firday

Heading component below a TEXT component Notice Spacing

More text in a Text Component under a Heading Component. More text in a Text Component under a Heading Component. More text in a Text Component under a Heading Component. More text in a Text Component under a Heading Component. More text in a Text Component under a Heading Component. More text in a Text Component under a Heading Component. More text in a Text Component under a Heading Component. More text in a Text Component under a Heading Component.

Here's yet another example where we're using a Grid Component

This grid component is set to have 2 columns. In each Column we're using the Content with Background component.

The Content with Background compont comes pre-built with a Header Component already baked into it. Note that the spacing under this heading component seems to be treated differently than a typical Header Component followed by another component.

In Column 1 we are using a Text Component that has a list in it, then it's followed by a CTA.

In Column 2 we have a Text component then to handle the list we're using the Simple List Component, followed by the CTA.

ACA health insurance

ACA insurance plans are sold on the health care Marketplace (also called the Exchange). In most cases, ACA plans are subsidized by the Federal or State government, which typically leads to a lower monthly premium.

These ACA plans are plans people can buy on their own, instead of through an employer or another government-run program, like Medicare or Medicaid. An ACA plan is a good fit if you need coverage for a full calendar year for you or your family.

An ACA plan might be a good fit if…

  • Your job doesn’t offer health insurance
  • You want long-term coverage for your family
  • You want comprehensive benefits
  • You qualify for a premium tax credit
Shop and learn about ACA plans

ACA health insurance

ACA insurance plans are sold on the health care Marketplace (also called the Exchange). In most cases, ACA plans are subsidized by the Federal or State government, which typically leads to a lower monthly premium.

These ACA plans are plans people can buy on their own, instead of through an employer or another government-run program, like Medicare or Medicaid. An ACA plan is a good fit if you need coverage for a full calendar year for you or your family.

An ACA plan might be a good fit if…

  • Your job doesn’t offer health insurance

  • You want long-term coverage for your family

  • You want comprehensive benefits

  • You qualify for a premium tax credit

Shop and learn about ACA plans

Here's an image of the layout and components used above - as you can see (based on the blue outlines) that each component has different spacing applied.

We also need to address spacing found in our Flyout

The flyout navigation is handled through experience fragments and the Navigation List Component. We've noticed that the spacing below the heading seems large and could be tightened. 

See image below for details.