The Flex Row content configuration has given you loads of options for configuring the layout of your content, including column layout configuration and the background color.  Additionally, there are CSS hooks for each row number allowing you some level of granular control over the formatting using CSS.

With the rapid, near-overnight development of the COVID-19 response website developed by MNIT IT staff in cooperation with the Governor's Office and the Department of Health, there were a few imperative formatting needs to fulfill the visual requirements.

New background colors

In addition to the options of light and dark gray, the branded blue, and white, we've added five new options that draw from the official MN branding:

The fifth option is labeled "custom" which opens up a new set of opportunities for additional formatting and control.

Custom CSS classes now supported

If the background color options aren't sufficient enough or you need additional levels of control, select "custom" from the list of background colors and then enter the class(es) that you would like added to that row.  For example, let's say you want the row to include the following classes:  gradient-background, white-text, rounded-corners.  You would enter them into the custom CSS class text field like this:  

gradient-background  white-text rounded-corners

Just type in all the class names with no commas and no periods.  Each class name should be separated by a space.

Use the custom class option if you're using a commonly shared set of styles between multiple flex rows throughout your page/site.

Custom Row ID for further control

Similar to the custom class options, you can assign a unique row ID attribute to your flex row.  This is particularly useful for one-off, unique styles or for providing specific hooks to latch onto with client-side scripting like jQuery or vanilla JavaScript.  

Naturally these custom class and row ID options require a certain level of familiarity with CSS and/or JavaScript.  If you're not comfortable with CSS, JavaScript, or don't have permission to edit your agency's CSS, it's best that you leave these fields alone.  If you need assistance customizing your content, open a Work Order Request and we'll gladly help you out.