/
npmgit

Typography

Базовые стили для заголовков и текста. Basic styles for headings and text.

Import

css
@import 'proxima-vue/styles/typography.css';

Title playground

Get More, Do More with the All-Access

Modifiers
Align
html
<h1 class="title">
  Get More, Do More with the All-Access
</h1>

Title BEM

Блок компонента title, модификаторы: Component block title, modifiers:

  • title_balanced title_dim title_up
  • title_size_xxs title_size_xs title_size_s title_size_normal title_size_m title_size_l title_size_xl title_size_xxl
  • title_ultralight title_extralight title_light title_regular title_medium title_semibold title_bold title_extrabold title_ultrabold
  • title_start title_center title_end

Title CSS

Слой компонента @layer proxima.title, также вы можете гибко cтилизовать заголовок через кастомные свойства: Component layer @layer proxima.title, also you can style the title flexibly through custom properties:

css
--title-font-size: 1em;
--title-font-family: inherit;
--title-font-weight: 700;
--title-line-height: 1.25;
--title-letter-spacing: normal;
--title-text-transform: none;
--title-text-align: inherit;
--title-word-break: normal;

/* Color */
--title-color: inherit;
--title-dim-color: var(--app-dim-color);

/* Mark */
--title-mark-color: var(--app-accent-color);
--title-mark-background: none;

/* Sizes */
--title-font-size-xxs: 0.625em;
--title-font-size-xs: 0.75em;
--title-font-size-s: 0.875em;
--title-font-size-m: 1.125em;
--title-font-size-l: 1.25em;
--title-font-size-xl: 1.5em;
--title-font-size-xxl: 2.5em;

Text playground

Proxima Centauri is a small, low-mass star located 4.2465 light-years (1.3020 pc) away from the Sun in the southern constellation of Centaurus. Its Latin name means the 'nearest [star] of Centaurus'. It was discovered in 1915 by Robert Innes and is the nearest-known star to the Sun.

Modifiers
Align
html
<p class="text">
  Proxima Centauri is a small...
</p>

Text BEM

Блок компонента text, модификаторы: Component block text, modifiers:

  • text_dim text_up
  • text_size_xxs text_size_xs text_size_s text_size_normal text_size_m text_size_l text_size_xl text_size_xxl
  • text_ultralight text_extralight text_light text_regular text_medium text_semibold text_bold text_extrabold text_ultrabold
  • text_start text_center text_end

Text CSS

Слой компонента @layer proxima.text, также вы можете гибко cтилизовать текст через кастомные свойства: Component layer @layer proxima.text, also you can style the text flexibly through custom properties:

css
--text-font-size: 1em;
--text-font-family: inherit;
--text-font-weight: 400;
--text-line-height: 1.5;
--text-letter-spacing: initial;
--text-transform: none;
--text-align: inherit;
--text-word-break: normal;

/* Color */
--text-color: inherit;
--text-dim-color: var(--app-dim-color);

/* Mark */
--text-mark-color: var(--app-accent-color);
--text-mark-background: none;

/* Sizes */
--text-font-size-xxs: 0.625em;
--text-font-size-xs: 0.75em;
--text-font-size-s: 0.875em;
--text-font-size-m: 1.125em;
--text-font-size-l: 1.25em;
--text-font-size-xl: 1.375em;
--text-font-size-xxl: 1.5em;
View source on GitHub