Typography playground

This is just a space for me to mess with blog typography styles. Feel free to poke around for design ideas.

My actual recommendation for this kind of thing is to use the @tailwindcss/typography plugin, but I built this design way before that plugin was available, so I like to keep it around.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Asides

Blockquote

Codeblock

<template>
  <div :ref="listbox.root.ref()">
    <div
      v-for="(option, index) in optionMetadata"
      :key="index"
      :ref="listbox.options.ref(index)"
    >
      <span>{{ option }}</span>
      <span v-show="listbox.is.selected(index)">✅</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import { useListbox } from '@baleada/vue-features'
import { optionMetadata } from './optionMetadata'

const listbox = useListbox()

watch(
  () => listbox.selected.value.picks.newest,
  pick => {
    console.log(optionMetadata[pick])
  }
)
</script>

Details

List

Media

Metal roofs and bright blue toilets in Khayelitsha

Table