Rounded Group
Background color has been added for visibility in the design library. Your rounded groups can have any background color or texture.
Rounded Small Group
The Rounded Small style is similar to the default Rounded, but with tighter rounded corners and less padding.
Rounded Small Group, Neutral Stroke
The Rounded Small style is similar to the default Rounded, but with tighter rounded corners and less padding.
Rounded Small Group, Rainbow Stroke
The Rounded Small style is similar to the default Rounded, but with tighter rounded corners and less padding.
When placed in a group of multiples, the rainbow grid will automatically colorize:
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Blue Gradient Group
This background texture can be used to highlight important areas of landing pages. The gradient features a subtle animation.
A small rounded group has been added inside the group to ensure the text is readable. You should put text directly on this background, as it will be difficult for users to read.
Blue Gradient Rounded Group
This group is identical to the Blue Gradient variant, except with rounded corners. This block could be placed in a sidebar page or other standalone area where the block doesn’t touch the edges of the page.
A small rounded group has been added inside the group to ensure the text is readable. You should put text directly on this background, as it will be difficult for users to read.
Goddard Gradient Group
This background texture can be used to highlight important areas of landing pages.
The gradient features a subtle animation and a large Committee of Seventy logo stylized with a repeating texture inspired by Mary Katherine Goddard’s Declaration of Independence.
A small rounded group has been added inside the group to ensure the text is readable. You should put text directly on this background, as it will be difficult for users to read.
Goddard Gradient Rounded Group
This group is identical to the Goddard Gradient variant, except with rounded corners. This block could be placed in a sidebar page or other standalone area where the block doesn’t touch the edges of the page.
A small rounded group has been added inside the group to ensure the text is readable. You should put text directly on this background, as it will be difficult for users to read.
Goddard Texture Right Group
This background texture can be used to add visual interest to landing pages.
The group’s background texture contains a large Committee of Seventy logo stylized with a repeating texture inspired by Mary Katherine Goddard’s Declaration of Independence.
Goddard Texture Right Rounded
This variant is identical to the Goddard Texture Right group, but with rounded corners.
A background color has been added for visibility here in the design library, but in practice, you’d use this style with a white background.
Goddard Texture Left Group
This background texture can be used to highlight important areas of content. It is designed to be used with dark backgrounds, as demonstrated here.
The group’s background texture contains a large Committee of Seventy logo stylized with a repeating texture inspired by Mary Katherine Goddard’s Declaration of Independence.
Goddard Texture Right Rounded
This variant is identical to the Goddard Texture Left group, but with rounded corners.