Inkline provides you with basic elements, typography, and link styles. It uses a native font stack that selects the best font family for each OS and device. The base font size is 1rem, so visitors can customize their font size as needed when zooming.
When more control is needed, you should check out the textual utility classes. Each font size, style and weight also has a corresponding helper class to style other elements the same.
All HTML heading sizes, <h1> through <h6>, are calculated using a multiplication of two factors: the base font size defined by the var(--font-size) CSS variable, and the var(--scale-ratio) minor third scale.
You can use helper classes to achieve heading styles. Classes .h1 through .h6 are available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
Displays are text elements larger than headings used for grabbing the viewer's attention and making a bold statement. Typically, displays are used in hero sections, banners, or call-to-actions: .d1 through .d6 are available.
A lead paragraph sets the tone for the rest of the content that follows. It is usually found at the beginning of an article or section and serves to capture the reader's attention and provide a brief summary of what they can expect from the content.
Preview
Component.vue
<template>
<pclass="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non
commodo luctus.
</p>
</template>
Inkline provides basic styling for all common HTML5 inline text elements.
Preview
Component.vue
<template>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
</template>
To avoid any unwanted semantic implications that the tags would bring, .mark and .small classes are also
available to apply the same styles as <mark> and <small>.
While not shown above, you can also use <b> and <i> in HTML5. <b> is meant to highlight words or phrases
without adding additional semantics, while <i> is mostly for voice, technical terms, etc.
You can easily realign text to components with text alignment classes.
Preview
Component.vue
<template>
<pclass="_text:justify">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum.
Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex
communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius
Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
</p>
<pclass="_text:left">This text is left aligned.</p>
<pclass="_text:center">This text is centered.</p>
<pclass="_text:right">This text is right aligned.</p>
</template>
You can align, wrap or truncate text responsively for any given xs, sm, md, lg, or xl breakpoint by adding the breakpoint prefix:
Preview
Component.vue
<template>
<pclass="_xs:text:center">This text is centered on extra-small screens.</p>
<pclass="_sm:text:center">This text is centered on small screens.</p>
<pclass="_md:text:center">This text is centered on medium screens.</p>
<pclass="_lg:text:center">This text is centered on large screens.</p>
<pclass="_xl:text:center">This text is centered on extra-large screens.</p>
</template>
The HTML <abbr> element for abbreviations and acronyms is styled to show the expanded version on hover.
Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of
assistive technologies.
To quote blocks of content from another source within your document, wrap <blockquote class="blockquote"> around any
HTML as the quote.
Preview
Component.vue
<template>
<blockquoteclass="blockquote -left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer>
</blockquote>
<blockquoteclass="blockquote -center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer>
</blockquote>
<blockquoteclass="blockquote -right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer>
</blockquote>
<blockquoteclass="blockquote -left -bordered">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer>
</blockquote>
<blockquoteclass="blockquote -right -bordered">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer>
</blockquote>
</template>
To remove the default list-style and margin on list items, use the .list.-unstyled classes or the ._list:unstyled utility class. This applies to immediate children list items only, meaning you will need to add the class for any nested lists as well.
Preview
Component.vue
<template>
<ulclass="list -unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>
Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
</ul>
</template>
Inline lists are a great way to display a series of related items in a single line, using the .list.-inline classes or the ._list:inline utility class. Rather than creating a separate bullet list or numbering system, inline lists are integrated into the text flow, making them a more visually pleasing and space-efficient option.
Description lists are used to present a list of terms and their corresponding descriptions. They are commonly used to define technical terms, glossaries, or metadata.
In the example below you can see that we're using the globally defined .row and .column classes. These classes behave exactly like their grid component counterparts.
Preview
Component.vue
<template>
<dlclass="row">
<dtclass="column -sm-3">Description lists</dt>
<ddclass="column -sm-9">A description list is perfect for defining terms.</dd>
<dtclass="column -sm-3">Euismod</dt>
<ddclass="column -sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dtclass="column -sm-3">Malesuada porta</dt>
<ddclass="column -sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dtclass="column -sm-3">Fusce dapibus</dt>
<ddclass="column -sm-9">
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus.
</dd>
<dtclass="column -sm-3">Nesting</dt>
<ddclass="column -sm-9">
<dlclass="row">
<dtclass="column -sm-4">Nested definition list</dt>
<ddclass="column -sm-8">
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
</dd>
</dl>
</dd>
</dl>
</template>