where is quarto class 'learn-more' coming from?

[ligea-alexander]

Description

Hi, just learning through dissecting quarto-web GitHub....I cannot for the life of me figure out where the {.learn-more} class is coming from. It is not in the styles.css or index.css or even theme.css file. It isn't native to Bootstrap so where?

[mcanouil]

Could you be a bit more specific? What are you talking about? Where did you see that?

[mcanouil]

It's defined where you took your screenshot and is for use on the documentation.
That's not a general feature, it's a custom thing for the documentation site as any custom thing you can find on various website including mine.

It's just a class used to identify the div, it could have been an ID.
You can see that it as no attributes attached to it:

Is it being defined somewhere explicitly in the Quarto source files (e.g., CSS, JavaScript, or Markdown templates), or is it a convention that Quarto users are expected to define on their own?

This has nothing to do with Quarto. It's HTML/CSS development.
Sorry, but it remains quite elusive what you are trying to learn or why.

That's simple/standard web development and usage of the fenced div syntax described in https://quarto.org/docs/authoring/markdown-basics.html#sec-divs-and-spans (and in Pandoc documentation).

If you want/need to have an HTML div for whatever reasons (display, etc.), then:

::: {.my-whatever-css-class-to-identify-this}
This content will be in an HTML div with the class `my-whatever-css-class-to-identify-this`.
This might be used for later CSS theming, JavaScript targetting or not at all.
:::

[ligea-alexander]

Thank you for the detailed explanation and example! Yes I understand that .learn-more is specific to the documentation site and not a general Quarto feature. However, my main question remains: Where is this .learn-more class defined in the source files? For example, is it in a CSS file, a JavaScript function, or hardcoded into the Markdown for the documentation? Understanding its origin will help me grasp how similar customizations might work. Thank you for your patience as I’m learning!

[mcanouil]

It's defined in the Quarto document by the code you took a screenshot of.
What's not clear about this?

If I write the following in a Quarto document:

::: {.my-class}
::: 

It means I have defined .my-class and I can add attributes via CSS

.my-class {
  ...
}

I can write JavaScript to target that class.

Or I can do nothing with it and use it only to "label" my div.

The same is for HTML.
If I write <div class="my-class"></div then "my-class" exists thus is defined.

Same things apply to ID:

::: {#my-id}
::: 

Then "my-id" is defined as an ID, so I can use it to apply CSS rule but I don't need or have to.

#my-id {
  ...
}

[ligea-alexander]

Ah, okay! It's just a semantic marker or potential hook?

[mcanouil]

Yes, sort of speak for this particular example.