Flux

Appearance

Typography ​

Typography is a critical element of any user interface, and in Flux, we understand the importance of creating clear, consistent, and visually appealing typography in our components. This documentation provides you with everything you need to know about typography in Flux, including font families, sizes, weights, and spacing. By the end of this documentation, you'll have a solid understanding of typography in Flux and be able to create beautiful and readable text throughout your Vue application. So let's dive in!

TIP

Flux uses the Inter Variable font family by default, you will need to include the font in your application for it to work.

Examples ​

Headings

Flux heading 1

Flux heading 2

Flux heading 3

Flux heading 4

Flux heading 5
Flux heading 6

<template>
    <h1>Flux heading 1</h1>
    <h2>Flux heading 2</h2>
    <h3>Flux heading 3</h3>
    <h4>Flux heading 4</h4>
    <h5>Flux heading 5</h5>
    <h6>Flux heading 6</h6>
</template>

<script
    setup
    lang="ts">
</script>

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aut ex excepturi expedita pariatur perspiciatis! Amet aperiam aut commodi fugit harum, id, incidunt necessitatibus, nemo nisi placeat voluptatem voluptatum!

Aspernatur commodi cum debitis doloremque, ea et harum hic illum natus nulla quam quisquam rem rerum similique tempora totam ullam vel. Accusamus consequuntur dicta facilis labore modi mollitia, perspiciatis voluptate?

Assumenda beatae commodi dolor dolore eum ex, excepturi fugiat id, inventore iure maiores maxime minima nesciunt nostrum, quidem sed sequi soluta tempora ullam voluptatem? Atque consequatur non omnis perferendis suscipit.

<template>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aut ex excepturi expedita pariatur perspiciatis! Amet aperiam aut commodi fugit harum, id, incidunt necessitatibus, nemo nisi placeat voluptatem voluptatum!</p>
    <p>Aspernatur commodi cum debitis doloremque, ea et harum hic illum natus nulla quam quisquam rem rerum similique tempora totam ullam vel. Accusamus consequuntur dicta facilis labore modi mollitia, perspiciatis voluptate?</p>
    <p>Assumenda beatae commodi dolor dolore eum ex, excepturi fugiat id, inventore iure maiores maxime minima nesciunt nostrum, quidem sed sequi soluta tempora ullam voluptatem? Atque consequatur non omnis perferendis suscipit.</p>
</template>

<script
    setup
    lang="ts">
</script>

Lists

Unordered list

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque exercitationem fugiat fugit id impedit laborum rerum sunt, vel. Animi consequuntur delectus eius excepturi modi praesentium quaerat quisquam unde! Voluptatum.
  • Accusantium ducimus eligendi esse placeat repellendus. Ad aperiam asperiores autem consectetur deleniti dolore, doloribus, dolorum ducimus explicabo, in ipsa iure labore natus necessitatibus nesciunt nihil officiis reprehenderit veritatis vitae voluptates!
  • Assumenda at culpa debitis delectus deleniti, deserunt explicabo inventore nostrum nulla rem sint tempore velit. Accusamus aliquid amet aperiam, delectus esse et fugit molestias, nihil omnis pariatur perferendis, placeat rem.

Ordered list

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque exercitationem fugiat fugit id impedit laborum rerum sunt, vel. Animi consequuntur delectus eius excepturi modi praesentium quaerat quisquam unde! Voluptatum.
  2. Accusantium ducimus eligendi esse placeat repellendus. Ad aperiam asperiores autem consectetur deleniti dolore, doloribus, dolorum ducimus explicabo, in ipsa iure labore natus necessitatibus nesciunt nihil officiis reprehenderit veritatis vitae voluptates!
  3. Assumenda at culpa debitis delectus deleniti, deserunt explicabo inventore nostrum nulla rem sint tempore velit. Accusamus aliquid amet aperiam, delectus esse et fugit molestias, nihil omnis pariatur perferendis, placeat rem.

<template>
    <h3>Unordered list</h3>
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque exercitationem fugiat fugit id impedit laborum rerum sunt, vel. Animi consequuntur delectus eius excepturi modi praesentium quaerat quisquam unde! Voluptatum.</li>
        <li>Accusantium ducimus eligendi esse placeat repellendus. Ad aperiam asperiores autem consectetur deleniti dolore, doloribus, dolorum ducimus explicabo, in ipsa iure labore natus necessitatibus nesciunt nihil officiis reprehenderit veritatis vitae voluptates!</li>
        <li>Assumenda at culpa debitis delectus deleniti, deserunt explicabo inventore nostrum nulla rem sint tempore velit. Accusamus aliquid amet aperiam, delectus esse et fugit molestias, nihil omnis pariatur perferendis, placeat rem.</li>
    </ul>

    <h3>Ordered list</h3>
    <ol>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque exercitationem fugiat fugit id impedit laborum rerum sunt, vel. Animi consequuntur delectus eius excepturi modi praesentium quaerat quisquam unde! Voluptatum.</li>
        <li>Accusantium ducimus eligendi esse placeat repellendus. Ad aperiam asperiores autem consectetur deleniti dolore, doloribus, dolorum ducimus explicabo, in ipsa iure labore natus necessitatibus nesciunt nihil officiis reprehenderit veritatis vitae voluptates!</li>
        <li>Assumenda at culpa debitis delectus deleniti, deserunt explicabo inventore nostrum nulla rem sint tempore velit. Accusamus aliquid amet aperiam, delectus esse et fugit molestias, nihil omnis pariatur perferendis, placeat rem.</li>
    </ol>
</template>

<script
    setup
    lang="ts">
</script>

Image

<template>
    <img src="https://images.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
        alt=""/>
</template>

<script
    setup
    lang="ts">
</script>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque dolor doloribus eos exercitationem fugit harum id in labore laborum maiores nemo nulla omnis provident, quia quidem quod sit voluptas.

<template>
    <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque dolor doloribus eos exercitationem fugit harum id in labore laborum maiores nemo nulla omnis provident, quia quidem quod sit voluptas.</blockquote>
</template>

<script
    setup
    lang="ts">
</script>

Using Inter Variable font ​

If you desire to use the Inter Variable font, you need to override the --font-sans css variable. To achieve this, you’ll need to add the following to your application.

app.css
css
:root {
    --font-sans: inter-variable, sans-serif;
}