Style Guide: All Available Content Elements

This post is a living style reference for PortfolioStack blog content. Every available element is demonstrated below. Use this post to verify styles before publishing.

Style Reference. This post exists solely to preview and validate content styles. It is not intended for public readers.

Inline Typography

Paragraphs are the default text element. Body copy is set in Heebo at 15px with a 1.7 line-height. Bold text is used for emphasis. Italic text for lighter emphasis. Bold and italic combined. Strikethrough for removed content. Underline for certain links or terms. Inline code for short snippets.

Highlighted text looks like this. Superscript: E = mc². Subscript: H₂O. External link: portfoliostack.com.

Headings

H2 is the primary section heading (shown above). H3 and H4 follow below.

This is an H3 Heading

H3 is used for sub-sections within an H2 section. It appears in the table of contents sidebar alongside H2 headings.

This is an H4 Heading

H4 is the smallest heading level. It is not shown in the table of contents.

Lists

Unordered List

First top-level item
Second top-level item — with a nested list below
Nested item A
Nested item B
Double-nested item
Third top-level item

Ordered List

Install the dependencies
Configure your environment
Copy the .env.example file
Fill in the required values
Start the development server
Open the app in your browser

Blockquote

"The goal is not to have a perfect plan — it is to have a resilient one. PortfolioStack is built around that idea."

Blockquotes are styled with a left accent border and muted italic text. Use them for pull quotes, testimonials, or notable excerpts.

Callouts & Notifications

Four banner styles are available as block elements. Insert them via the editor toolbar under Blocks → Banner.

Info: Use this for general notes, tips, or contextual information that supplements the main content.

Success: Use this to confirm a completed step, a working configuration, or a positive outcome.

Warning: Use this to flag potential pitfalls, non-obvious requirements, or things that may cause issues.

Error: Use this to surface critical errors, destructive operations, or things that will definitely break.

Code Blocks

Code blocks support syntax highlighting. Insert via Blocks → Code and select a language.

1// Fetch all published posts from the PortfolioStack REST API
2const response = await fetch('https://api.portfoliostack.com/v1/projects', {
3  headers: {
4    'Authorization': 'Bearer YOUR_API_KEY',
5    'Content-Type': 'application/json',
6  },
7})
8
9const { data, meta } = await response.json()
10console.log(`Found ${meta.total} projects`)
11data.forEach((project: Project) => {
12  console.log(project.name, project.naics_code)
13})

Media & Images

Images are inserted via Blocks → Media Block. Upload or select an image from the media library. An optional caption can be added.

Curving abstract shapes with an orange and blue gradient

Photo by Andrew Kliatskyi on Unsplash.

Video Embeds

YouTube and Vimeo URLs are supported. Insert via Blocks → Video and paste the URL. The embed is responsive at 16:9.

unknown node

Tables

Tables can be inserted using the Table option in the editor toolbar. Use tables for structured data comparison, feature matrices, or reference information.

Task Status	Meaning	Next Action
Not Started	Task has not been initiated	Assign an owner and set a start date
In Progress	Task is actively being worked	Update progress notes weekly
Blocked	Task cannot proceed due to a dependency or issue	Identify the blocker and escalate
Complete	Task is finished	Review deliverables and close out

Tip: Tables require the fixed toolbar. Click inside the table to access row/column controls.

Horizontal Rule

Insert a horizontal rule via the toolbar to separate sections visually.

The rule above is a full-width divider using the border color token.