---
id: 'Hint'
section: components
cssPrefix: pf-v6-c-hint
---## Examples

### Hint with title

```html
<div class="pf-v6-c-hint">
  <div class="pf-v6-c-hint__actions">
    <button
      class="pf-v6-c-menu-toggle pf-m-plain"
      type="button"
      aria-expanded="false"
      aria-label="Hint with title example actions"
      id="hint-with-title-example-hint"
    >
      <span class="pf-v6-c-menu-toggle__icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
          />
        </svg>
      </span>
    </button>
  </div>
  <div class="pf-v6-c-hint__title">Do more with Find it Fix it capabilities</div>
  <div
    class="pf-v6-c-hint__body"
  >Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.</div>
</div>

<br />

<div class="pf-v6-c-hint">
  <div class="pf-v6-c-hint__actions">
    <button
      class="pf-v6-c-menu-toggle pf-m-plain"
      type="button"
      aria-expanded="false"
      aria-label="Hint with title and footer example actions"
      id="hint-with-title-and-actions-example-hint"
    >
      <span class="pf-v6-c-menu-toggle__icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
          />
        </svg>
      </span>
    </button>
  </div>
  <div class="pf-v6-c-hint__title">Do more with Find it Fix it capabilities</div>
  <div
    class="pf-v6-c-hint__body"
  >Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.</div>
  <div class="pf-v6-c-hint__footer">
    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
      <span class="pf-v6-c-button__text">Try it for 90 days</span>
    </button>
  </div>
</div>

```

### Default with no title

```html
<div class="pf-v6-c-hint">
  <div class="pf-v6-c-hint__body">
    Welcome to the new documentation experience.
    <a href="#">Learn more about the improved features</a>.
  </div>
</div>

<br />

<div class="pf-v6-c-hint">
  <div class="pf-v6-c-hint__actions">
    <button
      class="pf-v6-c-menu-toggle pf-m-plain"
      type="button"
      aria-expanded="false"
      aria-label="Hint without title example actions"
      id="hint-with-no-title-example-hint"
    >
      <span class="pf-v6-c-menu-toggle__icon">
        <svg
          class="pf-v6-svg"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
        >
          <path
            d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
          />
        </svg>
      </span>
    </button>
  </div>
  <div
    class="pf-v6-c-hint__body"
  >Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.</div>
  <div class="pf-v6-c-hint__footer">
    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
      <span class="pf-v6-c-button__text">Try it for 90 days</span>
    </button>
  </div>
</div>

```

### Actions with no offset

```html
<div class="pf-v6-c-hint">
  <div class="pf-v6-c-hint__actions pf-m-no-offset">
    <button class="pf-v6-c-button pf-m-primary" type="button">
      <span class="pf-v6-c-button__text">Action</span>
    </button>
  </div>
  <div class="pf-v6-c-hint__title">Do more with Find it Fix it capabilities</div>
  <div
    class="pf-v6-c-hint__body"
  >Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.</div>
</div>

```

## Documentation

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-hint` | `<div>` | Initiates the hint component. **Required** |
| `.pf-v6-c-hint__title` | `<div>` | Initiates the hint title element. |
| `.pf-v6-c-hint__body` | `<div>` | Initiates the hint body element. |
| `.pf-v6-c-hint__footer` | `<div>` | Initiates the hint footer element. |
| `.pf-v6-c-hint__actions` | `<div>` | Initiates the hint actions element. |
| `.pf-m-no-offset` | `.pf-v6-c-hint__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the hint title. |
