SContent
<SContent>
applies basic styles to a supported list of native HTML elements.
Title of the section
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Excepteur sint occaecat cupidatat.
- Voluptate velit esse cillum dolore.
- Labore et dolore magna aliqua.
Import
ts
import SContent from '@globalbrain/sefirot/lib/components/SContent.vue'
Usage
Place HTML elements inside <SContent>
component and it will apply basic styles to the element, including spacing between elements.
template
<template>
<SContent>
<h2>Title of the section</h2>
<p>Lorem ipsum dolor sit amet.</p>
<p>Consectetur adipiscing elit.</p>
<ul>
<li>Excepteur sint occaecat cupidatat.</li>
<li>Voluptate velit esse cillum dolore.</li>
<li>Labore et dolore magna aliqua.</li>
</ul>
</SContent>
</template>
Supported elements
The following elements are supported:
<h1>
<h2>
<h3>
<p>
<strong>
<a>
<ul>
<ol>
<table>
Heading styles
You may use either the h1
or h2
class to apply the respective heading styles to the element. For example, you may want to use h1
class to style the element as a heading.
template
<SContent>
<p class="h1">Title text</p>
</SContent>