How to create a new blueprint and link elements to it

Hi Guys;
I'm trying to do the following:

1. Create a new blueprint (from scratch) for my About page.
2. Then use that blueprint for the about page ( I know the yaml and html.twig file names must be the same)

as an example:
I have in the about page a heading with a particular styling that can't just be manipulated using the # - ###### options in the markdown. So I would have to include it with a CSS class.
How do I add to blueprint a form field to ad a "H4" that takes a CSS class of (let's say) "framed".
Then, how do I include the tag on the html.twig file that take the info from that field and includes it where I put the tag on the html file.
Basically i'm trying to create a blueprint and take information from it and direct it to different sections of my page.

I'm so confused! help Please!!

Well, you can create a file named about.yaml inside user/themes/yourtheme/blueprints/ and fill it with the code below:

title: Article
'@extends':
    type: default
    context: blueprints://pages
form:
  fields:
    tabs:
      type: tabs
      active: 1

      fields:
        content:
          type: tab
          title: Accueil

          fields:
            header.mycustomtitle:
              type: text
              label: My custom h4 title

Then you edit about.html.twig and add this:
<h4 class="yourcustomclass">{{ page.header.mycustomtitle }}</h4>

and you are good to go.

There is several ways of creating a blueprint for your template, most of us just copy the first few lines from a blueprint in the antimatter theme and add our own field.
An alternative is to do that through the command line if that's your thing. You can therefore install the devtools plugin: bin/gpm install devtools.

And then you can generate a blueprint with the following command:
bin/plugin devtools new-blueprint

Thanks Paul!
I'll try that!