Color Swatches

The color of the text inside each color is showing the color which best fits AA color contrast guidelines for legibility. Please keep this in mind when customizing the template. The options are default light text color (defined in template), default dark text color (defined in template), pure white (#FFFFFF) or pure black (#000000). To ensure the correct color is shown, please use the variable shown. (In CSS, you would do   color: COLOR VARIABLE HERE; )

P.S. - The formulas available to check color contrast are good, but not always perfect. Please use common sense; if something appears too hard to read, then override the template and use a text color that works better.

H1 heading

You can also use class="h1" for this styling.

H2 heading

You can also use class="h2" for this styling.

H3 Heading

You can also use class="h3" for this styling.

H4 Heading

You can also use class="h4" for this styling.

Paragraph text. Bold, italic, link.

This is a bigger paragraph, like the lead paragraph in an article. To use, add class="text-bigger" to the paragraph or another block-level element like a div.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

This is a paragraph of default size. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

This is a smaller paragraph, like details or annotations. To use, add class="text-smaller" to the paragraph or another block-level element like a div. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

This is a longer paragraph, split into 2 columns. To use, add the class columns-2 to any block-level element, like a p tag or a div. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.

This is a blockquote. Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn't really do it, they just saw something. It seemed obvious to them after a while. That's because they were able to connect experiences they've had and synthesize new things.

1. This is a normal ordered list.
2. It has several items.
3. There's nothing special about it.

4. This is a reversed ordered list!
5. It has several items.
6. But it counts down!
7. Make sure your markup looks like this: <ol reversed>

1. This is a BIG ordered list.
2. To use it, make sure the <ol> has the class big.
3. It's great for listicals or if you want to make an impact!

1. This is a BIG reversed ordered list.
2. It's like the big list, and the reversed list, but both at the same time!
3. To use, add BOTH the classes big and reversed, AND how many items total are in the list plus 1:
   <ol class="big reversed" style="counter-reset: start-after 4;">. You need the extra item in there because of CSS silliness...don't ask.

Buttons

The text in each button is the class you need to add to the link to get that style. Hover interactions are managed in the template.

color-1-cta color-2-cta color-3-cta accent-1-cta accent-2-cta white-cta black-cta color-1-cta-ghost color-2-cta-ghost color-3-cta-ghost accent-1-cta-ghost accent-2-cta-ghost white-cta-ghost black-cta-ghost

Dark and Light Mode

The class on the body is set in the template with the settings. 

• The classes added are as follows; 
• Light mode - no class added
• Auto - class “darkmode” added
• Dark - class “alwaysdark” added 

This enables different CSS to show. So the visible dark mode, when in auto, is handled with CSS media queries based on whether or not the device is in dark mode. (prefers-color-scheme).

Special Grid Item Classes

You may have noticed when editing the "dynamic grid" section that each item has a "classes" box. The following classes are available. You may put multiple classes there, separated by a space, to do what you need it to do.

• light-text - overrides default and makes the text white
• dark-text - overrides default and makes the text black
• hidden-mobile - hides this item in mobile view
• pattern - indicates the background image is a pattern and needs to tile
   
• The following classes locks the background to a fixed position:
  (aka, the parallax effect)
  • fixed
     
• The following classes change how the background image interacts with the background color:
  (aka, the background blend mode)
  • multiply
  • screen
  • overlay
  • luminosity
     
• The following classes change the background color of the applicable grid item:
  • color-1
  • color-2
  • color-3
  • accent-1
  • accent-2
     
• The following classes apply scrims to the background of the grid item:
  • light-scrim-top (upper half of item)
  • light-scrim-bottom (lower half of item)
  • light-scrim-right (right half of item)
  • light-scrim-left (left half of item)
  
  
  • dark-scrim-top (upper half of item)
  • dark-scrim-bottom (lower half of item)
  • dark-scrim-right (right half of item)
  • dark-scrim-left (left half of item)
  
  
  • light-scrim-full-top (full-height, top to bottom)
  • light-scrim-full-bottom (full-height, bottom to top)
  • light-scrim-full-right (full-width, right to left)
  • light-scrim-full-left (full-width, left to right)
  
  
  • dark-scrim-full-top (full-height, top to bottom)
  • dark-scrim-full-bottom (full-height, bottom to top)
  • dark-scrim-full-right (full-width, right to left)
  • dark-scrim-full-left (full-width, left to right)
     
• The following classes change the alignment/float of the grid item content:
  (by default, grid items are aligned to the center vertically, and to the left horizontally.)
  • content-top - Content aligns to the top of the grid item
  • content-right - Content, including text, aligns to the right of the grid item
  • content-bottom - Content aligns to the bottom of the grid item
  • content-center - Content, including text, aligns to the center (horizontally) of the grid item
    
    
• The following miscellaneous classes provide additional control over individual tile formatting :
  
  • alt-font-1 - References an additional custom font, if loaded
  • min-padding - Removes excess tile padding, useful in some circumstances
  • black - Useful as inline style to force black font color. Note: overrides auto font color.
  • white - Useful as inline style to force white font color. Note: overrides auto font color
    
    
• The following classes control the animated tile-card transitions:
  NOTE: These transitions require a specific HTML structure, as demonstrated in the image below.
  
  
  • transition-up - Slides foreground card UP to reveal background card
  • transition-down - Slides foreground card DOWN to reveal background card
  • transition-left - Slides foreground card LEFT to reveal background card
  • transition-right - Slides foreground card RIGHT to reveal background card
  • transition-tl-rotate -Rotates foreground card UP and LEFT from TOP-LEFT corner to reveal background card
  • transition-down-img-on - Slides foreground card down to reveal background card text over bkg image — "img-on"
  • transition-slide-right transparent - Slides cards left one following the other, over static bkg image
  • transition-slide-left transparent - Slides cards left one following the other, over static bkg image
  • transition-slide-right - Slides cards left one following the other
  • transition-slide-left -Slides cards left one following the other
    
    
  Animated Tile Card — HTML Structure
  
  <div class="transition"> <div class="primary" style="background: url('/images/site-images/med/alalytics-1000w.jpg') no-repeat;"> <h3>Sample animation</h3> </div> <div class="secondary"> <p>Secondary point featured here.</p> </div> </div>

Multi Blog layout

Controled through Newsflash module "Featured Articles 4". The "4" can be adjusted to desired number of articles. The first article will be full witdh. Subsequent articles will auto-space themselves below.

Welcome to The New Normal

Working From Home

Until recently, the notion of allowing team members to work from home (WFH) was not terribly popular across Corporate America. Then came the COVID-19 pandemic. And virtually overnight, employers and workers were forced to accept WFH as the new norm. 

Most companies, given their avarice and fear of the practice, had neither the experience, policies or infrastructure to effectively manage remote teams…

Read more ...