Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.
Primer CSS Marketing Typography is used for marketing pages and it has utilities like heading utilities, body content utilities, etc.
In this article, we will discuss Typography Utilities in Primer CSS.
Primer CSS Marketing Typography Utilities:
- Heading utilities: These utilities are used to change the font, size, and weight using heading utility classes.
- Body content utilities: These utilities are used to change the font size, and font-weight of the element’s body on the marketing pages.
- Typographic utilities: These utilities are used as additional utilities.
Primer CSS Marketing Typography Heading utility classes:
- h*-mktg: The classes vary from h0 to h6 to change the font size and weight.
Primer CSS Marketing Typography Body Content utility classes:
- f*-mktg: The classes vary from f0 to f6 to change the font size and weight.
Primer CSS Marketing Typography Typographic utility classes:
- pullquote: This class is used to create the pullquote.
Syntax:
<p class="Marketing-Typography-Class">
...
</p>Example 1: This example demonstrates the implementation of Primer CSS Marketing Typography Heading Utilities.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS Marketing Typography</title>
<link rel="stylesheet"
href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
</head>
<body class="m-2">
<div class="text-center">
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h3>
Primer CSS Marketing Typography
Heading Utilities
</h3> <br>
<p class="h0-mktg">
GeeksforGeeks 0
</p>
<p class="h1-mktg">
GeeksforGeeks 1
</p>
<p class="h2-mktg">
GeeksforGeeks 2
</p>
<p class="h3-mktg">
GeeksforGeeks 3
</p>
<p class="h4-mktg">
GeeksforGeeks 4
</p>
<p class="h5-mktg">
GeeksforGeeks 5
</p>
<p class="h6-mktg">
GeeksforGeeks 6
</p>
</div>
</body>
</html>
|
Output:
Example 2: This example demonstrates the implementation of Primer CSS Marketing Typography Body Content Utilities.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS Marketing Typography </title>
<link rel="stylesheet"
href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
</head>
<body class="m-2">
<div class="text-center">
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h3>
Primer CSS Marketing Typography
Body Content Utilities
</h3> <br>
<p class="f0-mktg mb-3">
A Computer Science portal for geeks.
</p>
<p class="f1-mktg mb-3">
It contains well written, well thought
and well explained computer science and
programming articles.
</p>
<p class="f2-mktg">
A Computer Science portal for geeks.
</p>
<p class="f3-mktg mb-3">
A Computer Science portal for geeks.
</p>
<p class="f4-mktg mb-3">
It contains well written, well thought
and well explained computer science and
programming articles.
</p>
<p class="f5-mktg">
A Computer Science portal for geeks.
</p>
<p class="f6-mktg">
It contains well written, well thought
and well explained computer science and
programming articles.
</p>
</div>
</body>
</html>
|
Output:
Example 3: This example demonstrates the implementation of Primer CSS Marketing Typography Typographic utilities.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS Marketing Typography </title>
<link rel="stylesheet"
href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
</head>
<body class="m-2">
<div class="text-center">
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h3>
Primer CSS Marketing Typography
Typographic utilities
</h3> <br>
<p class="pullquote">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles.
</p>
</div>
</body>
</html>
|
Output:
Reference: https://primer.style/css/utilities/marketing-type