Page flags

Page flags appear at the top of the page. They come in two groups.

You can set page flags in the YAML front matter on each page under the flags object. Flags are only shown if they’re included in the front matter.

On the left, you’ll see the labels of “Beta feature” and “For account admins”. These are set using the beta and admin properties:

flags:
  admin: true
  beta: true

On the right, you’ll see the plans a feature is included in. To use the feature box, set the logzio-plan property to community, enterprise, or pro:

flags:
  logzio-plan: pro

Info boxes

Info boxes comprise a <div class="info-box"> container.

Info boxes come in 4 CSS classes: note, warning, important, tip, read. CSS handles icon and heading styling, so contributors need to worry about only the class name and box content.

Notes

<div class="info-box note">
  Content
</div>

Notes are non-actionable. They’re more important than the surrounding text but less important than warnings. Could something bad happen if the user ignores this note? If no, then it’s a note. Otherwise, it’s a warning.

Warnings

<div class="info-box warning">
  Content
</div>

Use warnings when the user could cause damage that’s difficult or impossible to recover from. If you need something less severe than a warning, consider a note or important note.

Important notes

<div class="info-box important">
  Content
</div>

Important notes help the user work through common trip-up points. If the user could cause damage by ignoring this, consider a warning instead.

Pro tips

<div class="info-box tip">
  Content
</div>

Pro tips convey best practices and good actions to ensure success. Think of these as more proactive than important notes.

Read more

<div class="info-box read">
  Content
</div>

“Read more” boxes point the user to additional reading material. This is useful when we’re touching on a topic that’s too complex to convey on this page.