Typography

Bitrix24 UI offers typography components for content styling.

Nuxt UI

Demo

Usage

When using Bitrix24 UI with Nuxt Content v3, you get access to a set of pre-styled prose components.

When using the <ContentRenderer> component, your markdown content will be automatically styled with beautiful typography and consistent spacing. This includes headings, paragraphs, lists, tables, code blocks and more - no additional configuration required.

TIP

You can follow @nuxt/content installation guide to get started.

Prose Components

Prose components are replacements for HTML typography tags introduced by the @nuxtjs/mdc module, Bitrix24 UI overrides each one to provide a consistent look and feel.

TIP

You can learn more about Prose components in the Nuxt Content documentation.

INFO

You can use the prose components directly in your templates using the Prose prefix.

<template>
  <ProseTable>
    <ProseThead>
      <ProseTr>
        <ProseTh>Prop</ProseTh>
        <ProseTh>Default</ProseTh>
      </ProseTr>
    </ProseThead>
    <ProseTbody>
      <ProseTr>
        <ProseTd>
          <ProseCode>color</ProseCode>
        </ProseTd>
        <ProseTd>
          <ProseCode>collab</ProseCode>
        </ProseTd>
      </ProseTr>
    </ProseTbody>
  </ProseTable>
</template>

h1

<template>
  <ProseH1>Welcome to "Sales Peak" Agency</ProseH1>
</template>

h2

<template>
  <ProseH2>Your Growth Is Our Profession</ProseH2>
</template>

h3

<template>
  <ProseH3>Our Core Services</ProseH3>
</template>

h4

<template>
  <ProseH4>Workflow Stages</ProseH4>
</template>

h5

<template>
  <ProseH5>Comprehensive Solutions</ProseH5>
</template>

h6

<template>
  <ProseH6>Our Advantages</ProseH6>
</template>

p

<template>
  <ProseP>We are the industry leaders in digital marketing since 2010. Our team helps businesses increase sales using cutting-edge technologies and proven methodologies.</ProseP>
</template>

a

<template>
  <ProseP>
    Contact us via <ProseA href="tel:+1234567890">phone</ProseA> or through our
    <ProseA href="#prose-components">contact form</ProseA> or see our <ProseA href="#usage">Core Services</ProseA>.
  </ProseP>
</template>

blockquote

<template>
  <ProseBlockquote>
    "Working with this agency boosted our revenue by 300% in six months!"<br>
    - TechProduct LLC
  </ProseBlockquote>
</template>

strong

<template>
  <ProseP>We are the <ProseStrong>industry leaders</ProseStrong> in digital marketing since 2010. Our team helps businesses increase sales using cutting-edge technologies and proven methodologies.</ProseP>
</template>

em

<template>
  <ProseP>We are the <ProseEm>industry leaders</ProseEm> in digital marketing since 2010. Our team helps businesses increase sales using cutting-edge technologies and proven methodologies.</ProseP>
</template>

ul

<template>
  <ProseUl>
    <ProseLi>PPC Advertising</ProseLi>
    <ProseLi>SEO Optimization</ProseLi>
    <ProseLi>SMM Promotion</ProseLi>
    <ProseLi>Conversion-focused Website Development</ProseLi>
    <ProseLi>Email Marketing</ProseLi>
    <ProseLi>Analytics & Big Data</ProseLi>
  </ProseUl>
</template>

ol

<template>
  <ProseOl>
    <ProseLi>Business Audit</ProseLi>
    <ProseLi>Strategy Development</ProseLi>
    <ProseLi>Implementation</ProseLi>
    <ProseLi>Testing</ProseLi>
    <ProseLi>Launch</ProseLi>
    <ProseLi>Ongoing Support</ProseLi>
  </ProseOl>
</template>

hr

<template>
  <ProseBlockquote>
    "Working with this agency boosted our revenue by 300% in six months!"<br>
    - TechProduct LLC
  </ProseBlockquote>

  <ProseHr />

  <ProseH3 id="coreServices">
    Our Core Services
  </ProseH3>
</template>

table

INFO

You can use props rounded, zebra, rowHover, bordered.

See TableWrapper for more details

<template>
  <ProseTable
    :zebra="false"
  >
    <ProseThead>
      <ProseTr>
        <ProseTh>Metric</ProseTh>
        <ProseTh>Result</ProseTh>
        <ProseTh>Guarantee</ProseTh>
      </ProseTr>
    </ProseThead>
    <ProseTbody>
      <ProseTr>
        <ProseTd>Traffic Growth</ProseTd>
        <ProseTd>+150%</ProseTd>
        <ProseTd>6 months</ProseTd>
      </ProseTr>
      <ProseTr>
        <ProseTd>Conversion Increase</ProseTd>
        <ProseTd>
          <ProseUl>
            <ProseLi>PPC Advertising</ProseLi>
            <ProseLi>SEO Optimization</ProseLi>
            <ProseLi>SMM Promotion</ProseLi>
            <ProseLi>Conversion-focused Website Development</ProseLi>
            <ProseLi>Email Marketing</ProseLi>
            <ProseLi>Analytics & Big Data</ProseLi>
          </ProseUl>
        </ProseTd>
        <ProseTd>1 year</ProseTd>
      </ProseTr>
      <ProseTr>
        <ProseTd><ProseCode>ROI</ProseCode></ProseTd>
        <ProseTd>
          <ProseOl>
            <ProseLi>Landing Page</ProseLi>
            <ProseLi>Google Ads Setup</ProseLi>
            <ProseLi>Basic SEO</ProseLi>
            <ProseLi>Monthly Reporting</ProseLi>
          </ProseOl>
        </ProseTd>
        <ProseTd>
          <ProseP>
            For API integration see <ProseCode color="collab">Docs</ProseCode>
          </ProseP>
        </ProseTd>
      </ProseTr>
    </ProseTbody>
  </ProseTable>
</template>

img

<template>
  <ProseImg
    class="mx-auto max-h-[220px] aspect-3/1 object-contain"
    src="https://www.bitrix24.com/images/content_en/images/head/b24rich_new.png"
    alt="Sales growth chart"
  />
</template>

code

<template>
  <ProseP>
    For API integration use <ProseCode>client.getSalesData(date_from, date_to)</ProseCode> and see
    <ProseCode color="collab">Docs</ProseCode>
  </ProseP>
</template>

pre

<template>
  <ProsePre>
    {{ demoPreObj }}
  </ProsePre>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const demoPreObj = ref([
  [
    'Analytics',
    'Data',
    'Sample'
  ],
  [
    'Month',
    'Visitors',
    'Conversion %'
  ],
  [
    'January',
    15234,
    2.3
  ],
  [
    'February',
    28901,
    3.1
  ]
])
</script>