First things first, the frontmatter section of the markdown file, the authors bio is pulled from the data/authors.yaml file, if no info is found, the authors name will be used as a fallback and no author block will be displayed at the bottom of the post.
---
title: "How to write a blog post"
description: "Brave's latest VPN update brings hundreds of new servers, city-level selection, and extended device support, offering users an unparalleled privacy and security solution directly within their browser."
date: 2024-10-30
lastmod: 2025-01-31
type: lionheart
category:
- Company news
- bat-creators-brave-rewards
- Privacy
author:
- Shivan Kaul Sahib
- Brad Richter
- Pete Snyder
images:
- images/featured.jpg
---If no hero variation is defined, just like this post, the default orange solid background kicks in.
However, we have now 3 main hero variations, the one with the image below the title:
heroColor: bg-text-interactive
heroImage: images/hero-image.png
imageAfterHero: trueone with an image burned in with a color overlay:
heroColor: bg-text-interactive
heroImage: images/hero-image-2.pngor a simple a solid color hero:
heroColor: bg-text-interactiveOf course, you can use any Nala color or even a custom color.
Title 1
# Title 1Title 2
## Title 2Title 3
### Title 3Title 4
#### Title 4Title 5
##### Title 5Title 6
###### Title 6Blockquotes
This is a pull quote
To create your own custom blockquotes, start with the standard Markdown blockquote syntax (>).
Add the .pull-quote class and you’ll get the next paragraph text to wrap around the pull-quote.
> This is a pull quote
{.pull-quote}You can also add a big blockquote like this one, and add a quote mark a bit more to the left:
"This is a big black blockquote"
<span class="lg:-ml-8">"</span>This is a big black blockquote"
{.big-quote .text-text-primary}Or go without the quote mark:
This is a big orange blockquote
> This is a big orange blockquote
{.big-quote .text-orange-30}This is a big blue blockquote
> This is a big blue blockquote
{.big-quote .text-primary-50}This is a different style of blockquote, it’s full-width and you can also add the quote mark a bit more to the left:
"This is a full-width black blockquote"
> <span class="lg:-ml-8">"</span>This is a full-width black blockquote"
{.full-quote .bg-text-primary}This is a full-width orange blockquote
> This is a full-width orange blockquote
{.full-quote .bg-orange-30}This is a full-width blue blockquote
> This is a full-width blue blockquote
{.full-quote .bg-primary-50}Callout blocks
Callout blocks are a different way to style text, using the blockquote markdown syntax.
This is a callout block
> This is a callout block
{.callout}We can also add a background color to the callout block:
This is a callout block with a background color
> This is a callout block with a background color
{.callout .bg-primary-20}We can even have lists or titles inside a callout block:
Imagine a deep learning AI designed for image recognition. While a deep learning AI like this will have many layers, each trained to perform a specific task, we’ll group some together here for purposes of illustration.
Learn more Imagine a deep learning AI designed for image recognition. While a deep learning AI like this will have many layers, each trained to perform a specific task, we’ll group some together here for purposes of illustration.
another paragraph
- Low-level layers: these layers tackle the most basic tasks to identify simple patterns, such as edges, corners, curves, and basic textures.
- Mid-level layers: these layers learn to combine the features from low-level layers to detect more meaningful patterns like shapes (e.g. circles), or parts of objects (e.g. wheels).
- High-level layers: low- and mid-level features are combined to recognize even more complex patterns, like specific objects (e.g. cars or faces).
> <span class="title">Learn more</span>
> Imagine a deep learning AI designed for image recognition. While a deep learning AI like this will have many layers, each trained to perform a specific task, we'll group some together here for purposes of illustration.
>
> another paragraph
>
> - **Low-level layers:** these layers tackle the most basic tasks to identify simple patterns, such as edges, corners, curves, and basic textures.
> - **Mid-level layers:** these layers learn to combine the features from low-level layers to detect more meaningful patterns like shapes (e.g. circles), or parts of objects (e.g. wheels).
> - **High-level layers:** low- and mid-level features are combined to recognize even more complex patterns, like specific objects (e.g. cars or faces).
{.callout .bg-orange-20} Figures
We are adding some new content-helpers to make it easier to add images to the blog posts. You can easily update the existing content-helpers/img declarations, the new content-helper will use the alt text for the caption unless specified.
{{< content-helpers/figure
"image" = "/blog/how-to/images/image.png"
"class" = "track-main-content"
"caption" = "This alt text should be also the caption"
>}}And if you’re creating a new figure, you can use the new parameters:
{{< content-helpers/figure
"image" = "/blog/how-to/images/image.png"
"alt" = "Alt text"
"class" = "track-main-content"
"caption" = "Caption text"
>}} We can also have big figures by adding the class {.track-main-content}
{{< content-helpers/figure
"image" = "/blog/how-to/images/image.png"
"alt" = "Alt text"
"class" = "track-main-content"
"loading" = "lazy"
"caption" = "Caption text"
>}} Remember to leave an empty line after the close statement >}}
In order to create a grid of figures, you can use the following code:
{{< content-helpers/figure-grid >}}
{{< content-helpers/figure
"image" = "images/image.png"
"alt" = "Alt text"
"caption" = "This is a caption, it's optional"
>}}
{{< content-helpers/figure
"image" = "images/image.png"
"alt" = "Alt text"
>}}
{{< /content-helpers/figure-grid >}}Tables
We can use the same styling for tables, either changing the background-color, the table size, or the text color.
| Tables | Are | Cool |
|---|---|---|
| col 1 is | left-aligned | $1600 |
| col 2 is | centered | $12 |
| col 3 is | right-aligned | $1 |
| Tables | Are | Cool |
|----------|:-------------:|-------:|
| col 1 is | left-aligned | $1600 |
| col 2 is | centered | $12 |
| col 3 is | right-aligned | $1 |
{.bg-primary-20}The cell alignment is done with the semicolon :, the table alignment with the usual tailwind classes mx-auto.
| Tables | Are | Cool |
|---|---|---|
| col 1 is | left-aligned | $1600 |
| col 2 is | centered | $12 |
| col 3 is | right-aligned | $1 |
| Tables | Are | Cool |
|----------|:-------------:|-------:|
| col 1 is | left-aligned | $1600 |
| col 2 is | centered | $12 |
| col 3 is | right-aligned | $1 |
{.bg-orange-20 .mx-auto}We can also have tables with lists, and start the table from the track-main-content grid track.
| Feature | Free Leo | Leo Premium |
|---|---|---|
| Models |
|
|
| Rate Limits | Reasonable rate limits | Higher rate limits |
| Quality of Conversations | Limited by models | Very high |
| Privacy | Inputs are always submitted anonymously through a reverse-proxy and are not retained. | Inputs are always submitted anonymously through a reverse-proxy and are not retained. |
| Feature | Free Leo | Leo Premium |
|:-------------------------|:--------------------------------------------------|:-----------------------------------------------------------------|
| Models | <ul><li>Llama 2 13B</li><li>Code Llama 13B</li></ul> | <ul><li>Llama 2 13B</li><li>Llama 2 70B</li><li>Code Llama 13B</li><li>Code Llama 70B</li><li>Anthropic Claude Instant</li></ul> |
| Rate Limits | Reasonable rate limits | Higher rate limits |
| Quality of Conversations | Limited by models | Very high |
| Privacy | Inputs are always submitted anonymously through a reverse-proxy and are not retained. | Inputs are always submitted anonymously through a reverse-proxy and are not retained. |
{.bg-neutral-20 .track-main-content}Code blocks
We can insert some code inline code snippets like this one:
brave://settings/content/localhostAccess
`brave://settings/content/localhostAccess`or use the HTML code tag: (is the same result as the markdown code block.)
<code>brave://settings/content/localhostAccess</code>or make them clickable with a simple addition to the code block, you can use any of the supported syntax highlighting options from Hugo.
For example: in this how-to page we are using ```markdown which is the most syntactically correct for this case, but ultimately it’s up to you to choose the most readable syntax for your code.
<p>code with click-to-copy functionality</p>```HTML
<p>code with click-to-copy functionality</p>
```Footnotes
You can insert footnotes like this one 1
You can insert footnotes like this one [^1]
[^1]: This text is a footnote <code>/etc/hosts</code> <https://brave.com/download>
