Blog typography examples, most of it!

See most of the markdown examples here. Copy elsewhere and use, if you ever get stuck.

← Back to blog

Post card of this post has brand colors. Why? Because it is featured. Also it has no related posts! Because it is different from others and have no friends… Or its commented out in the code!

See the frontmatter of it at content/posts/typography.md file, don’t judge! By the way this post being the first one in the blog have something to do with it is publishDate. It’s the latest.

---
isFeatured: true
title: Typography examples, most of it!
description: See most of the markdown examples here. Copy elsewhere and use, if you ever get stuck.
tags: [ai, business, future]
cover: "./navigating-the-future-the-role-of-ai-in-modern-business.jpg"
coverAlt: "A futuristic illustration of AI integrating with business"
publishDate: 2024-10-30
# relatedPosts: ['the-day-my-code-went-rogue-a-tale-of-ai-shenanigans', 'embracing-change-the-future-of-remote-work']
---

This is h1 title

h1 title is used up above at the start of the page. So you should start with h2 titles like this;

## Your h2 title

Also using h1 in the markdown content has no effect for the page. But for the accessibility and SEO reasons, use them in order. Order in this page is wrong, it is for demonstration purposes only!

tailwind/typography plugin is being used for styling the markdown.

For heading and other styles look at the /components/blog/Prose file

Btw, this is a blockquote, inside a blockquote, which is inside another blockquote!

This is h2 title

This is h3 title

This is h4 title

This is h5 title
This is h6 title above a divider

And A Table

SyntaxDescriptionAnother Column
HeaderTitleAnother data
ParagraphTextAnother data
LinkTextAnother data
QuoteTextAnother data
CaptionTextAnother data

Table is styled as others in the file Prose.astro, look at the code block below. You can easily figure it out by changing the styles with prose-thead, prose-th, prose-td, prose-tr classes.

<div
  class="prose prose-headings:text-neutral-200 prose-h2:mb-3 prose-h2:text-2xl prose-h3:mb-2 prose-h4:mb-1 prose-p:text-neutral-400 prose-a:scroll-m-20 prose-a:text-brand-600 prose-a:no-underline prose-a:transition-colors prose-a:duration-300 hover:prose-a:text-brand-500 prose-blockquote:border-l-2 prose-blockquote:border-l-brand-500 prose-blockquote:font-light prose-strong:text-neutral-300 prose-li:scroll-m-20 prose-headings:scroll-m-24 prose-li:marker:text-neutral-400 ..."
>
  ...
</div>

I’m a cat dog person! Examples of strikethrough, bold and italic text.

Here is a link which goes nowhere.

Oh, look an illusive footnote! => 1

What about ordered lists? Numbered you ask?

Lists, within lists. Look at the indent!

  1. Data Analysis and Insights

    • AI can process vast amounts of data quickly, providing businesses with valuable insights that inform strategic decisions.
    • Companies like Netflix and Amazon utilize AI algorithms to analyze viewer preferences and purchasing behavior, tailoring recommendations that increase user engagement and sales
      • I’m inside another list!
        • This can go on forever…
          • And ever…
            • and eve..
  2. Automation of Routine Tasks

    • Many organizations are leveraging AI to automate repetitive tasks, freeing up employees to focus on higher-value work.
    • From chatbots handling customer inquiries to robotic process automation in finance, AI is streamlining operations across industries.
  3. Enhanced Customer Experience

    • AI-driven tools, such as personalized marketing platforms and virtual assistants, enable businesses to provide tailored experiences to their customers.
    • A report by McKinsey indicates that companies implementing AI-driven personalization can see revenue increases of up to 10% or more.

Or without numbers, unordered I mean?

While the benefits of AI are clear, organizations must navigate several challenges:

  • Data Privacy Concerns: With increased data collection comes heightened scrutiny over privacy practices. Businesses must ensure they comply with regulations like GDPR to maintain consumer trust.

  • Job Displacement: The rise of AI may lead to job displacement in certain sectors. It’s crucial for businesses to invest in reskilling their workforce to adapt to the changing landscape.

  • Ethical Considerations: As AI systems become more autonomous, ethical considerations regarding their use and decision-making processes become paramount. Organizations must establish clear guidelines to govern AI applications.

And an image

Alt text of it

What a beautiful day!

Also don't forget that you can just use html with tailwindcss here. And style as you wish. Good luck!

Beware, angry footnote below!

Footnotes

  1. What you lookin at? Begone!.

Latest Posts

See all posts

Let's work together