Test atoms: Default

Prototype

HTML
View
Context
Assets
Info
Notes


        
        <div class="test-atoms">
    <ul>
        <li>
            <h1 class="
    title-xxl
    
">Title XXL (H1)</h1>
            <div class="description">
                <div class="
    bodycopy-s
    
    
    
    
">

                    Máx. 767: 36px<br>768 a 1023: 36px<br>1024 a 1279: 36px<br>1280 a 1679: 36px<br>Mín. 1680: 36px

                </div>
            </div>
        </li>
        <li>
            <h1 class="
    title-xl
">Title XL (H1)</h1>

            <div class="description">
                <div class="
    bodycopy-s
    
    
    
    
">

                    Máx. 767: 36px<br>768 a 1023: 44px<br>1024 a 1279: 32px<br>1280 a 1679: 44px<br>Mín. 1680: 52px

                </div>
            </div>
        </li>
        <li>
            <h2 class="
    title-l
    
    
    
    
">

                Title L (H2)

            </h2>
            <div class="description">
                <div class="
    bodycopy-s
    
    
    
    
">

                    Máx. 767: 26px<br>768 a 1023: 32px<br>1024 a 1279: 22px<br>1280 a 1679: 32px<br>Mín. 1680: 30px

                </div>
            </div>
        </li>
        <li>
            <h3 class="
        title-m
        
        
        
        
    ">Title M (H3)</h3>
            <div class="description">
                <div class="
    bodycopy-s
    
    
    
    
">

                    Máx. 767: 18px<br>768 a 1023: 24px<br>1024 a 1279: 18px<br>1280 a 1679: 26px<br>Mín. 1680: 20px

                </div>
            </div>
        </li>
        <li>
            <h4 class="
    title-s
    
">Title S (H4)</h4>
            <div class="description">
                <div class="
    bodycopy-s
    
    
    
    
">

                    Máx. 767: 16px<br>768 a 1023: 16px<br>1024 a 1279: 16px<br>1280 a 1679: 16px<br>Mín. 1680: 16px

                </div>
            </div>
        </li>
        <li>
            <div id="" class="
    bodycopy-l
    
    
    
">Bodycopy L</div>
            <div class="description">
                <div class="
    bodycopy-s
    
    
    
    
">

                    Máx. 767: 18px<br>768 a 1023: 18px<br>1024 a 1279: 18px<br>1280 a 1679: 18px<br>Mín. 1680: 18px

                </div>
            </div>
        </li>
        <li>
            <div class="
    bodycopy-m
    
    
    
">
                Bodycopy M
            </div>
            <div class="description">
                <div class="
    bodycopy-s
    
    
    
    
">

                    Máx. 767: 16px<br>768 a 1023: 16px<br>1024 a 1279: 16px<br>1280 a 1679: 16px<br>Mín. 1680: 16px

                </div>
            </div>
        </li>
        <li>
            <div class="
    bodycopy-s
    
    
    
    
">

                Bodycopy S

            </div>
            <div class="description">
                <div class="
    bodycopy-s
    
    
    
    
">

                    Máx. 767: 13px<br>768 a 1023: 13px<br>1024 a 1279: 13px<br>1280 a 1679: 13px<br>Mín. 1680: 13px

                </div>
            </div>
        </li>
        <li>
            <div class="bodycopy-xs
    
    
    ">
                Bodycopy XS
            </div>
            <div class="description">
                <div class="
    bodycopy-s
    
    
    
    
">

                    Máx. 767: 11px<br>768 a 1023: 11px<br>1024 a 1279: 11px<br>1280 a 1679: 11px<br>Mín. 1680: 11px

                </div>
            </div>
        </li>
        <li>
            <div class="
    number-xl
    
"><span>Number XL</span></div>
            <div class="description">
                <div class="
    bodycopy-s
    
    
    
    
">

                    Máx. 767: 80px<br>768 a 1023: 100px<br>1024 a 1279: 80px<br>1280 a 1679: 100px<br>Mín. 1680: 130px

                </div>
            </div>
        </li>
        <li>
            <div class="
    number-l
    
"><span>Number L</span></div>
            <div class="description">
                <div class="
    bodycopy-s
    
    
    
    
">

                    Máx. 767: 30px<br>768 a 1023: 32px<br>1024 a 1279: 50px<br>1280 a 1679: 70px<br>Mín. 1680: 90px

                </div>
            </div>
        </li>
        <li>
            <div class="
    number-m
    
"><span>Number M</span></div>

            <div class="description">
                <div class="
    bodycopy-s
    
    
    
    
">

                    Máx. 767: 26px<br>768 a 1023: 26px<br>1024 a 1279: 30px<br>1280 a 1679: 40px<br>Mín. 1680: 40px

                </div>
            </div>
        </li>
        <li>
            <div class="
    number-xs
    
"><span>Number XS</span></div>
            <div class="description">
                <div class="
    bodycopy-s
    
    
    
    
">

                    Máx. 767: 10px<br>768 a 1023: 10px<br>1024 a 1279: 10px<br>1280 a 1679: 12px<br>Mín. 1680: 12px

                </div>
            </div>
        </li>
    </ul>
</div>


        <div class="test-atoms">
    <ul>
        <li>{{> @title-xxl title-xxl }}<div class="description">{{> @bodycopy-s texto-xxl }}</div></li>
        <li>{{> @title-xl title-xl }}<div class="description">{{> @bodycopy-s texto-xl }}</div></li>
        <li>{{> @title-l title-l }}<div class="description">{{> @bodycopy-s texto-l }}</div></li>
        <li>{{> @title-m title-m }}<div class="description">{{> @bodycopy-s texto-m }}</div></li>
        <li>{{> @title-s title-s }}<div class="description">{{> @bodycopy-s texto-s }}</div></li>
        <li>{{> @bodycopy-l bodycopy-l }}<div class="description">{{> @bodycopy-s texto-bl }}</div></li>
        <li>{{> @bodycopy-m bodycopy-m }}<div class="description">{{> @bodycopy-s texto-bm }}</div></li>
        <li>{{> @bodycopy-s bodycopy-s }}<div class="description">{{> @bodycopy-s texto-bs }}</div></li>
        <li>{{> @bodycopy-xs bodycopy-xs }}<div class="description">{{> @bodycopy-s texto-bxs }}</div></li>
        <li>{{> @number-xl number-xl }}<div class="description">{{> @bodycopy-s texto-nxl }}</div></li>
        <li>{{> @number-l number-l }}<div class="description">{{> @bodycopy-s texto-nl }}</div></li>
        <li>{{> @number-m number-m }}<div class="description">{{> @bodycopy-s texto-nm }}</div></li>
        <li>{{> @number-xs number-xs }}<div class="description">{{> @bodycopy-s texto-nxs }}</div></li>
    </ul>
</div>


        
            
            {
  "title-xxl": {
    "text": "Title XXL (H1)"
  },
  "texto-xxl": {
    "text": "Máx. 767: 36px<br>768 a 1023: 36px<br>1024 a 1279: 36px<br>1280 a 1679: 36px<br>Mín. 1680: 36px"
  },
  "title-xl": {
    "text": "Title XL (H1)"
  },
  "texto-xl": {
    "text": "Máx. 767: 36px<br>768 a 1023: 44px<br>1024 a 1279: 32px<br>1280 a 1679: 44px<br>Mín. 1680: 52px"
  },
  "title-l": {
    "text": "Title L (H2)"
  },
  "texto-l": {
    "text": "Máx. 767: 26px<br>768 a 1023: 32px<br>1024 a 1279: 22px<br>1280 a 1679: 32px<br>Mín. 1680: 30px"
  },
  "title-m": {
    "text": "Title M (H3)"
  },
  "texto-m": {
    "text": "Máx. 767: 18px<br>768 a 1023: 24px<br>1024 a 1279: 18px<br>1280 a 1679: 26px<br>Mín. 1680: 20px"
  },
  "title-s": {
    "text": "Title S (H4)"
  },
  "texto-s": {
    "text": "Máx. 767: 16px<br>768 a 1023: 16px<br>1024 a 1279: 16px<br>1280 a 1679: 16px<br>Mín. 1680: 16px"
  },
  "bodycopy-l": {
    "text": "Bodycopy L"
  },
  "texto-bl": {
    "text": "Máx. 767: 18px<br>768 a 1023: 18px<br>1024 a 1279: 18px<br>1280 a 1679: 18px<br>Mín. 1680: 18px"
  },
  "bodycopy-m": {
    "text": "Bodycopy M"
  },
  "texto-bm": {
    "text": "Máx. 767: 16px<br>768 a 1023: 16px<br>1024 a 1279: 16px<br>1280 a 1679: 16px<br>Mín. 1680: 16px"
  },
  "bodycopy-s": {
    "text": "Bodycopy S"
  },
  "texto-bs": {
    "text": "Máx. 767: 13px<br>768 a 1023: 13px<br>1024 a 1279: 13px<br>1280 a 1679: 13px<br>Mín. 1680: 13px"
  },
  "bodycopy-xs": {
    "text": "Bodycopy XS"
  },
  "texto-bxs": {
    "text": "Máx. 767: 11px<br>768 a 1023: 11px<br>1024 a 1279: 11px<br>1280 a 1679: 11px<br>Mín. 1680: 11px"
  },
  "number-xl": {
    "number": "Number XL"
  },
  "texto-nxl": {
    "text": "Máx. 767: 80px<br>768 a 1023: 100px<br>1024 a 1279: 80px<br>1280 a 1679: 100px<br>Mín. 1680: 130px"
  },
  "number-l": {
    "number": "Number L"
  },
  "texto-nl": {
    "text": "Máx. 767: 30px<br>768 a 1023: 32px<br>1024 a 1279: 50px<br>1280 a 1679: 70px<br>Mín. 1680: 90px"
  },
  "number-m": {
    "number": "Number M"
  },
  "texto-nm": {
    "text": "Máx. 767: 26px<br>768 a 1023: 26px<br>1024 a 1279: 30px<br>1280 a 1679: 40px<br>Mín. 1680: 40px"
  },
  "number-xs": {
    "number": "Number XS"
  },
  "texto-nxs": {
    "text": "Máx. 767: 10px<br>768 a 1023: 10px<br>1024 a 1279: 10px<br>1280 a 1679: 12px<br>Mín. 1680: 12px"
  }
}

File:

Content:


                                .test-atoms {
    padding: 30px 20%;
    ul{display: flex;flex-wrap:wrap;justify-content:space-around;
        li{width:auto; padding:20px;box-shadow:2px 2px 2px 1px rgba(0, 0, 0, 0.2);border-radius:20px; margin: 10px;
            .description > div{margin-top: 20px;color:#ccc!important;}
        }
    }
}

URL: /components/raw/test-atoms/test-atoms.css
Filesystem Path: src/00-examples/test-atoms/test-atoms.css
Size: 307 Bytes

Handle: @test-atoms--default
Variants (2): Default , Hipotecas
Preview:
- With layout
- Component only
Filesystem Path: src/00-examples/test-atoms/test-atoms.hbs
References (13): @title-xxl, @bodycopy-s, @title-xl, @title-l, @title-m, @title-s, @bodycopy-l, @bodycopy-m, @bodycopy-xs, @number-xl, @number-l, @number-m, @number-xs

No notes defined.