Unfortunately, achieving this required the use of grid classes mixed with list items, which probably has unintended effects for one or both components.
Expected behavior
Optimally, Vanilla makes available a new component that looks and functions as the desired design here. An Issue has already been filed against Vanilla to add such a component:
Once this component has been added, it should be used here on ubuntu.com as well, rather than the current solution, and this Issue should track this work.
Summary
In order to match the desired design, the team has utilized a series of
p-list--divided
components with theis-ticked
boolean on its child items:https://github.com/canonical/ubuntu.com/blob/cloud-bubble-refresh/templates/azure/sql.html#L51
Unfortunately, achieving this required the use of grid classes mixed with list items, which probably has unintended effects for one or both components.
Expected behavior
Optimally, Vanilla makes available a new component that looks and functions as the desired design here. An Issue has already been filed against Vanilla to add such a component:
https://github.com/canonical/vanilla-framework/issues/5293
Once this component has been added, it should be used here on ubuntu.com as well, rather than the current solution, and this Issue should track this work.