Containerflex (v3)
Functional component variations
Default state – all required fields at minimal values
Sample text
id (minimal value)
Sample text
id (maximal value)
Sample text
All dialog fields populated with minimal values
Sample text
layout = (inherited)
Sample text
layout = simple (inherited)
Sample text
layout = responsiveGrid (inherited)
accessibilityLabel (minimal value, inherited)
Sample text
accessibilityLabel (maximal value, inherited)
Sample text
roleAttribute (minimal value, inherited)
Sample text
roleAttribute (maximal value, inherited)
Sample text
title (minimal value, inherited)
Sample text
title (maximal value, inherited)
Comprehensive test content for title
backgroundIcon (minimal value, inherited)
Sample text
backgroundIcon (maximal value, inherited)
Sample text
Style variations
Style: Type > Center content
Sample text
Style: Items per row (default 3) > 2
Sample text
Style: Items per row (default 3) > 4
Sample text
Style: Items per row (default 3) > 5
Sample text
Style: AG background colors > Concrete
Sample text
Style: AG background colors > White
Sample text
Style: AG background colors > AG Green 1
Sample text
Style: AG background colors > Secondary green 2
Sample text
Style: AG background colors > Secondary green 3
Sample text
Style: AG background colors > Secondary green 4
Sample text
Style: AG background colors > AG Blue 1
Sample text
Style: AG background colors > Secondary blue 2
Sample text
Style: AG background colors > Secondary blue 3
Sample text
Style: AG background colors > Secondary blue 4
Sample text
Style: AG background colors > Secondary blue 5
Sample text
Style: Professionals background colors > AG Green 2
Sample text
Style: Professionals background colors > AG Green 3
Sample text
Style: Professionals background colors > AG Green 4
Sample text
Style: Professionals background colors > AG Green 5
Sample text
Style: Professionals background colors > AG Blue 2
Sample text
Style: Professionals background colors > AG Blue 3
Sample text
Style: Professionals background colors > AG Blue 4
Sample text
Style: Professionals background colors > AG Blue 5
Sample text
Style: Border > Full Green
Sample text
Style: Border > Thick Left Green
Sample text
Style: Border > Full Gray
Sample text
Style: Border > Left Gray
Sample text
Style: Border > Right Gray
Sample text
Style: Shadow > Shadow
Sample text
Style: Padding top > 15px
Sample text
Style: Padding top > 20px
Sample text
Style: Padding top > 30px
Sample text
Style: Padding top > 40px
Sample text
Style: Padding top > 60px
Sample text
Style: Padding bottom > 15px
Sample text
Style: Padding bottom > 20px
Sample text
Style: Padding bottom > 30px
Sample text
Style: Padding bottom > 40px
Sample text
Style: Padding bottom > 60px
Sample text
Style: Padding left > 15px
Sample text
Style: Padding left > 20px
Sample text
Style: Padding left > 30px
Sample text
Style: Padding left > 40px
Sample text
Style: Padding left > 60px
Sample text
Style: Padding right > 15px
Sample text
Style: Padding right > 20px
Sample text
Style: Padding right > 30px
Sample text
Style: Padding right > 40px
Sample text
Style: Padding right > 60px
Sample text
Style: Mobile Padding Top > 20px
Sample text
Style: Mobile Padding Top > 40px
Sample text
Style: Mobile Padding Bottom > 20px
Sample text
Style: Mobile Padding Bottom > 40px
Sample text
Style: Mobile Padding Around > Around
Sample text
Style: Mobile Padding Around > Left & right
Sample text
Style: Mobile Row gap > None
Sample text
Default style (no explicit style applied)
Sample text
Style combo 1: Type>Center content + Items per row (default 3)>2 + AG background colors>Concrete + Professionals background colors>AG Green 2 + Border>Full Green + Shadow>Shadow + Padding top>15px + Padding bottom>15px + Padding left>15px + Padding right>15px + Mobile Padding Top>20px + Mobile Padding Bottom>20px + Mobile Padding Around>Around + Mobile Row gap>None
Sample text
Style combo 2: Type>Center content + Items per row (default 3)>4 + AG background colors>White + Professionals background colors>AG Green 3 + Border>Thick Left Green + Shadow>Shadow + Padding top>20px + Padding bottom>20px + Padding left>20px + Padding right>20px + Mobile Padding Top>40px + Mobile Padding Bottom>40px + Mobile Padding Around>Left & right + Mobile Row gap>None
Sample text
Style combo 3: Type>Center content + Items per row (default 3)>5 + AG background colors>AG Green 1 + Professionals background colors>AG Green 4 + Border>Full Gray + Shadow>Shadow + Padding top>30px + Padding bottom>30px + Padding left>30px + Padding right>30px + Mobile Padding Top>20px + Mobile Padding Bottom>20px + Mobile Padding Around>Around + Mobile Row gap>None
Sample text
Style combo 4: Type>Center content + Items per row (default 3)>2 + AG background colors>Secondary green 2 + Professionals background colors>AG Green 5 + Border>Left Gray + Shadow>Shadow + Padding top>40px + Padding bottom>40px + Padding left>40px + Padding right>40px + Mobile Padding Top>40px + Mobile Padding Bottom>40px + Mobile Padding Around>Left & right + Mobile Row gap>None
Sample text
Style combo 5: Type>Center content + Items per row (default 3)>4 + AG background colors>Secondary green 3 + Professionals background colors>AG Blue 2 + Border>Right Gray + Shadow>Shadow + Padding top>60px + Padding bottom>60px + Padding left>60px + Padding right>60px + Mobile Padding Top>20px + Mobile Padding Bottom>20px + Mobile Padding Around>Around + Mobile Row gap>None
Sample text
Style combo 6: Type>Center content + Items per row (default 3)>5 + AG background colors>Secondary green 4 + Professionals background colors>AG Blue 3 + Border>Full Green + Shadow>Shadow + Padding top>15px + Padding bottom>15px + Padding left>15px + Padding right>15px + Mobile Padding Top>40px + Mobile Padding Bottom>40px + Mobile Padding Around>Left & right + Mobile Row gap>None
Sample text
Style combo 7: Type>Center content + Items per row (default 3)>2 + AG background colors>AG Blue 1 + Professionals background colors>AG Blue 4 + Border>Thick Left Green + Shadow>Shadow + Padding top>20px + Padding bottom>20px + Padding left>20px + Padding right>20px + Mobile Padding Top>20px + Mobile Padding Bottom>20px + Mobile Padding Around>Around + Mobile Row gap>None
Sample text
Style combo 8: Type>Center content + Items per row (default 3)>4 + AG background colors>Secondary blue 2 + Professionals background colors>AG Blue 5 + Border>Full Gray + Shadow>Shadow + Padding top>30px + Padding bottom>30px + Padding left>30px + Padding right>30px + Mobile Padding Top>40px + Mobile Padding Bottom>40px + Mobile Padding Around>Left & right + Mobile Row gap>None
Sample text
Style combo 9: Type>Center content + Items per row (default 3)>5 + AG background colors>Secondary blue 3 + Professionals background colors>AG Green 2 + Border>Left Gray + Shadow>Shadow + Padding top>40px + Padding bottom>40px + Padding left>40px + Padding right>40px + Mobile Padding Top>20px + Mobile Padding Bottom>20px + Mobile Padding Around>Around + Mobile Row gap>None
Sample text
Style combo 10: Type>Center content + Items per row (default 3)>2 + AG background colors>Secondary blue 4 + Professionals background colors>AG Green 3 + Border>Right Gray + Shadow>Shadow + Padding top>60px + Padding bottom>60px + Padding left>60px + Padding right>60px + Mobile Padding Top>40px + Mobile Padding Bottom>40px + Mobile Padding Around>Left & right + Mobile Row gap>None
Sample text
Style combo 11: Type>Center content + Items per row (default 3)>4 + AG background colors>Secondary blue 5 + Professionals background colors>AG Green 4 + Border>Full Green + Shadow>Shadow + Padding top>15px + Padding bottom>15px + Padding left>15px + Padding right>15px + Mobile Padding Top>20px + Mobile Padding Bottom>20px + Mobile Padding Around>Around + Mobile Row gap>None
Sample text
Critical integration: required dialog fields combined with primary style
Sample text