Typography
By default the general typography follows Bootstrap 5's styling. When using heading tags for example, no additional style is defined.
| Heading | Example |
|---|---|
<h1></h1> |
h1. Heading |
<h2></h2> |
h2. Heading |
<h3></h3> |
h3. Heading |
<h4></h4> |
h4. Heading |
<h5></h5> |
h5. Heading |
<h6></h6> |
h6. Heading |
Text Style
To get the theme style in the texts, it is necessary to assign classes to the elements. This is uniquely defined in the file theme.css
In this file you can change absolutely all the typography of the theme.
.text-style-1 { font-size: 6.2rem; font-weight: 800; }
.text-style-2 { font-size: 5.2rem; font-weight: 800; }
.text-style-3 { font-size: 4.2rem; font-weight: 800; }
.text-style-4 { font-size: 4.2rem; font-weight: 100; }
.text-style-5 { font-size: 3.2rem; font-weight: 800; }
.text-style-6 { font-size: 3.2rem; font-weight: 100; }
.text-style-7 { font-size: 2.2rem; font-weight: 700; }
.text-style-8 { font-size: 2.2rem; font-weight: 100; }
.text-style-9 { font-size: 1.75rem; font-weight: 700; }
.text-style-10 { font-size: 1.75rem; font-weight: 100; }
.text-style-11 { font-size: 1.2rem; font-weight: 700; }
.text-style-12 { font-size: 1.2rem; font-weight: 400; }
Note that you can use style classes on any text element, as in the following example where the classes text-style-1 and text-style-3 are used to form a block of text.
<h1 class="title white">
<span class="text-1 text-style-1 text-outline">Lorem ipsum</span>
<span class="text-2 text-style-3 text-italic">dolor sit amet <mark class="animated-underline tertiary">dictum</mark>.</span>
</h1>Tip
Shock Theme has variations of Super Headings designed sizes that can be used with style classes. Copying HTML blocks directly from the template is the easiest way to build your pages.
Font Family
The font family is certainly one of the most important parts of a design concept. All the necessary configuration is set in the file font-family.css and defined as primary and secondary fonts in the file theme.css as you can see below.
:root {
--primary-font: lato, sans-serif;
--secondary-font: proxima-nova, sans-serif;
}
Shock Theme uses only two fonts from the Adobe Typekit that we feel are ideal for the overall design of the theme. If you want to change this, or add new font families, we recommend that you read this article from Google Fonts