Sefirot

SContent ​

<SContent> applies basic styles to a supported list of native HTML elements.

@globalbrain/sefirot/lib/components/SContent.vue

View in Histoire

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>