Style Review

For a larger intro paragraph, use <p class="first"> in your HTML. This page contains all base styles and code snippets for customizing pages.

This is bold text senectus et netus et malesuada fames ac turpis> egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam donec eu libero sit amet quam sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, inline code style, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. I am a hyperlink in turpis pulvinar facilisis. Ut felis. Just click and edit on the fly!

Primary Button

Secondary Button

Menu

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.

Header Level 4

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
Header Level 5

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Header Level 6

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Tables

This is a standard table Column 1 Column 2 Column 3
Row 1 Cell Cell Cell
Row 2 Cell Cell Cell
This table uses <thead> and <th> in its HTML Column 1 Column 2 Column 3
Row 1 Cell Cell Cell
Row 2 Cell Cell Cell

Accordions

This is my content.

Blockquotes

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est."– First Last, Job Title, Company
Hint: Do not use <p> tags within your blockquote, and wrap your citations in <cite> tags:
<blockquote>Lorem ips um dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est. <cite>&ndash; First Last, Job Title, Company</cite></blockquote>

Callouts


Primary Callout - 
These are used to break up text on a page or call-out extremely important information that can't be done with a button or horizontal rule. Use sparingly.

These are used to break up text on a page or call-out extremely important information that can't be done with a button or horizontal rule. Use sparingly.

Learn More

Sticky Menu

Customize your grid-container as needed.
<div class="is-sticky--desktop-menu">
<div class="container">
<h6 style="padding-left: 3rem;">Menu</h6>
<div class="grid-container cols-2-4 bg-white small-text">
<div class="grid-item"></div>...

Grids

To create a grid, start with the following:

<div class="grid-container cols-1-2 bg-white">

<div class="grid-item"></div>

<div class="grid-item"></div>

</div>

This code creates a two-column grid that stacks as one column on mobile. (cols-1-2)
The background is white because bg-white is included in the class. 
This grid-item has the default background color. No need to add a class.
This grid-item has bg-aqua in the class.
This grid-item has bg-orange in the class.
This grid-item has bg-navy in the class.

Background colors can be applied to the grid-container OR the grid-item.

Tip: Add small-text to the grid-container class to reduce the text size.

Columns & Spans

Above, you see cols-1-2 and cols-2-4. Other options include:

  • <div class="grid-container cols-1-2">
  • <div class="grid-container cols-1-3">
  • <div class="grid-container cols-2-3">
  • <div class="grid-container cols-2-4">
  • <div class="grid-container cols-2-6">
The grid-items in 3-, 4- and 6-column grids can be merged by adding span classes to a grid-item:
  • <div class="grid-item span-2">
  • <div class="grid-item span-3">
  • <div class="grid-item span-4">
  • <div class="grid-item span-5">
  • <div class="grid-item span-6">
Column 1
Columns 2-3

Column 1
Columns 2-3
Column 4

Column 1-3
Column 4
Columns 5-6

You get the idea.

50/50 Container

In your HTML, use this code block:

<div class="title-copy-container">
<div class="grid-container cols-1-2 container">
<div class="grid-item">
<h3>Title</h3>
</div>
<div class="grid-item">Any content you want, like images, bullets, or text.</div>
</div>
</div>

Important!

Custom Header Ribbons

The custom header ribbons on ASAP Summit and ASAP BioPharma Conference depend on the Page Title staying the same. Why? Novi injects the page title into the HTML, which is referenced in the CSS to override the background color. Example below:

.c-body-content__asap-summit .header-ribbon {
  background-color: var(--secondary-color);
}

If the page title changes, the CSS will break.

SEO Tips

Here are key SEO tips for optimizing your page title, meta description, and H1:

• Page Title Optimization: Keep your title between 50-60 characters to avoid truncation in search results, place your primary keyword near the beginning, and make it compelling enough to encourage clicks while accurately describing your content.

• Meta Description Strategy: Write descriptions between 150-160 characters that include your target keyword naturally, provide a clear value proposition that entices users to click, and treat it as advertising copy that summarizes what readers will gain from your content.

• H1 Best Practices: Use only one H1 per page that clearly indicates the main topic, incorporate your primary keyword naturally without keyword stuffing, and ensure it matches the intent and promise made in your page title for consistency.

• Keyword Alignment: Maintain thematic consistency by using related keywords across all three elements, ensuring your page title, meta description, and H1 work together to reinforce your content's main topic and search intent.

• User Intent Focus: Craft all three elements to match what searchers are actually looking for, whether that's informational content, product details, or solutions to specific problems, rather than just targeting high-volume keywords that may not convert.