cruc components for Magento 2

Paragraph 

<!-- P Paragraph -->
<div class="paragraph ">
    <p>
        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, 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
    </p>
</div>


<!-- Span Paragraph -->
<div class="paragraph ">
    <span>
            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
        </span>
</div>


<!-- Preformatted Paragraph -->
<div class="paragraph ">
    <pre>
    Preformatted text
</pre>

</div>


<!-- Blockquote Paragraph -->
<div class="paragraph ">
    <blockquote>
        Blockquote
        <cite>
        <a href="#">
            Quotation source
        </a>
   </cite>
    </blockquote>

</div>


<!-- Paragraph With Link -->
<div class="paragraph ">
    <a class="link " href="#" title="Title">
    Link
</a>

</div>


<div class="paragraph {{ class }}">
    {{#if tag }}
        <{{{ tag }}} {{{ attributes }}}>
            {{{ text }}}
        </{{{ tag }}}>
    {{/if}}
    {{#if contentElement }}
        {{ render (component contentElement) contentContext }}
    {{/if}}
</div>
 
/* P Paragraph */
{
  "tag": "p",
  "class": "",
  "text": "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, 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"
}


/* Span Paragraph */
{
  "tag": "span",
  "text": "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"
}


/* Preformatted Paragraph */
{
  "contentElement": "preformatted"
}


/* Blockquote Paragraph */
{
  "contentElement": "blockquote"
}


/* Paragraph With Link */
{
  "contentElement": "link"
}
  • Content: 
    $paragraph-color      : $color-primary !default;
$paragraph-font-family: $font-family-base !default;
$paragraph-font-weight: $font-weight-normal !default;
$paragraph-line-height: $font-line-height !default;
$paragraph-font-size  : $font-size-medium !default;
$paragraph-margin     : 0 0 $spacer--medium 0 !default;
$paragraph-transition : none !default;

.paragraph {
    color: $paragraph-color;
    font-family: $paragraph-font-family;
    font-weight: $paragraph-font-weight;
    line-height: $paragraph-line-height;
    font-size: $paragraph-font-size;
    margin: $paragraph-margin;
    transition: $paragraph-transition;
}

p {
    @extend .paragraph;
}
  • URL: /components/raw/paragraph/_paragraph.scss
  • Filesystem Path: build/components/Atoms/typography/paragraph/_paragraph.scss
  • Size: 660 Bytes

There are no notes for this item.