Containerform (v1)
Functional component variations
Default state – all required fields at minimal values
All dialog fields populated with minimal values
layout = (inherited)
layout = simple (inherited)
layout = responsiveGrid (inherited)
id (minimal value, inherited)
id (maximal value, inherited)
accessibilityLabel (minimal value, inherited)
accessibilityLabel (maximal value, inherited)
roleAttribute (minimal value, inherited)
roleAttribute (maximal value, inherited)
Style variations
Style: Background > Concrete
Style: Background > AG Green
Style: Background > Concrete
Style: Background > Mobility
Style: Background > Home
Style: Background > Family
Style: Background > Health
Style: Background > Pension
Style: Background > Invest
Style: Padding top > 15px
Style: Padding top > 20px
Style: Padding top > 30px
Style: Padding top > 40px
Style: Padding top > 60px
Style: Padding bottom > 15px
Style: Padding bottom > 20px
Style: Padding bottom > 30px
Style: Padding bottom > 40px
Style: Padding bottom > 60px
Style: Padding left > 15px
Style: Padding left > 20px
Style: Padding left > 30px
Style: Padding left > 40px
Style: Padding left > 60px
Style: Padding right > 15px
Style: Padding right > 20px
Style: Padding right > 30px
Style: Padding right > 40px
Style: Padding right > 60px
Style: Mobile Padding Top > Padding Top 20px
Style: Mobile Padding Top > Padding Bottom 40px
Style: Mobile Padding Bottom > Padding Bottom 20px
Style: Mobile Padding Bottom > Padding Bottom 40px
Style: Mobile Padding Around > Padding around
Style: Mobile Padding Around > Padding Left & right
Default style (no explicit style applied)
Style combo 1: Background>Concrete + Padding top>15px + Padding bottom>15px + Padding left>15px + Padding right>15px + Mobile Padding Top>Padding Top 20px + Mobile Padding Bottom>Padding Bottom 20px + Mobile Padding Around>Padding around
Style combo 2: Background>AG Green + Padding top>20px + Padding bottom>20px + Padding left>20px + Padding right>20px + Mobile Padding Top>Padding Bottom 40px + Mobile Padding Bottom>Padding Bottom 40px + Mobile Padding Around>Padding Left & right
Style combo 3: Background>Concrete + Padding top>30px + Padding bottom>30px + Padding left>30px + Padding right>30px + Mobile Padding Top>Padding Top 20px + Mobile Padding Bottom>Padding Bottom 20px + Mobile Padding Around>Padding around
Style combo 4: Background>Mobility + Padding top>40px + Padding bottom>40px + Padding left>40px + Padding right>40px + Mobile Padding Top>Padding Bottom 40px + Mobile Padding Bottom>Padding Bottom 40px + Mobile Padding Around>Padding Left & right
Style combo 5: Background>Home + Padding top>60px + Padding bottom>60px + Padding left>60px + Padding right>60px + Mobile Padding Top>Padding Top 20px + Mobile Padding Bottom>Padding Bottom 20px + Mobile Padding Around>Padding around
Style combo 6: Background>Family + Padding top>15px + Padding bottom>15px + Padding left>15px + Padding right>15px + Mobile Padding Top>Padding Bottom 40px + Mobile Padding Bottom>Padding Bottom 40px + Mobile Padding Around>Padding Left & right
Style combo 7: Background>Health + Padding top>20px + Padding bottom>20px + Padding left>20px + Padding right>20px + Mobile Padding Top>Padding Top 20px + Mobile Padding Bottom>Padding Bottom 20px + Mobile Padding Around>Padding around
Style combo 8: Background>Pension + Padding top>30px + Padding bottom>30px + Padding left>30px + Padding right>30px + Mobile Padding Top>Padding Bottom 40px + Mobile Padding Bottom>Padding Bottom 40px + Mobile Padding Around>Padding Left & right
Style combo 9: Background>Invest + Padding top>40px + Padding bottom>40px + Padding left>40px + Padding right>40px + Mobile Padding Top>Padding Top 20px + Mobile Padding Bottom>Padding Bottom 20px + Mobile Padding Around>Padding around
Critical integration: required dialog fields combined with primary style