Emphasis text
The EmphasisText
component makes text slightly larger and slightly bolder than the H3, H4, and StylishHeader styles. Like the StylishHeader, the enclosed text doesn’t appear in the TOC.
There’s two reasons for this component’s existence. First is appearance. Sometimes you want to make text a bit more bold (<b>
, <strong>
) but larger than normal paragraph size. The component keeps you from needing to manually add inline styles (for example, style="font-weight:900; font-size:2em;"
) and promotes consistency.
The second reason is accessibility. Aria labels for headings in published Starlight docs look like this: section titled = My example
. Making text visually stand out doesn’t make it a section. When published, the EmphasisText renders as a <strong>
, which is more appropriate (and accurate).
Import the EmphasisText
component like so:
import EmphasisText from '/src/components/docs/EmphasisText.astro'
Use the <EmphasisText>
component within your content like so:
<EmphasisText text='This text has a lot of emphasis.' />
Working example
Section titled “Working example”This right here is emphasized text.
I’m adding more words here so that there’s something between the emphasized text and the next H2.
Add to another project
Section titled “Add to another project”As of May 2025, the Web Monetization docs are the only docs set up to use this component. If you want to add it to another doc project:
- Locate the
src/components/docs
folder. Ifdocs
doesn’t exist, create it. - Create a file named
EmphasisText.astro
. - Add the following to the file and save.
---const { text } = Astro.props;---<p><strong class="emphasisText">{text}</strong></p><style>.emphasisText {font-size: var(--sl-text-h3);}</style>
- Restart your local environment if it doesn’t seem to be working.