Adding Classes and other Attributes to Blocks

Every block you add to an interface is wrapped in its own element on the page. You can give that element an anchor ID (so you can link straight to it) and your own class names (so you can style it from your interface's stylesheets). Both are set in the block's Section Classes & Attributes panel.

Adding an anchor ID or classes

1. In the interface builder, click the block in the preview or in the Block Tree to open its options.
2. Open the Section Classes & Attributes panel.
3. Fill in either or both fields:
   • Anchor ID: a single ID with no spaces, such as pricing. It becomes the element's id.
   • Class names: one or more class names separated by spaces, such as highlight full-width. They're added to the element's classes.
4. Save, then publish when you're ready.

Linking to a block with its anchor ID

Once a block has an anchor ID, you can link to it by adding # and the ID to the page's address:

• From outside your site (an email, a social post or another website): a link such as https://example.com/services#pricing opens the Services route at the block with the anchor ID pricing.
• On the same page: a plain link to #pricing in your HTML, such as <a href="#pricing">See pricing</a> in a Custom Code block, jumps down to it. This is handy for "jump to" links on a long page.

When visitors move between routes inside your site, the new route opens at the top, so an anchor is most reliable for links that arrive from outside or that stay on the same page.

Each anchor ID must be unique on the page. If two blocks share one, links go to the first.

Styling with your own classes

Add your class names to the block, then write the styles in the interface's stylesheets in the Styles panel (see Style Settings Sidebar). For example, give a block the class highlight and add:

.highlight {
    background: var(--primary);
    color: #fff;
    padding: 3em 0;
}

Classes are reusable. Apply the same class to several blocks and they all pick up the style, and changing the style updates every one of them.

Classes Qik adds automatically

Alongside your own classes, every block's element carries:

• i-<id>: unique to this one block instance. The block's Section CSS panel uses it, so styles written there only affect this block and what's inside it.
• c-<block id>-<version>: shared by every instance of the same block.
• t-<mixin id>: one for each mixin selected in the block's Section CSS panel.

For how these fit together, see How SCSS works inside the builder.

Tips

• Choose descriptive, stable class names (team-grid, call-to-action) rather than ones that describe a look (blue-box). You can then change the look without renaming anything.
• Styles for a class cascade into the blocks nested inside it, so a class on an outer section is a tidy way to restyle everything within it.
• Only an anchor ID and class names can be set here. For other HTML attributes, use a Custom Code block or your own block, where you control the HTML.

FAQs