Webáruház indítása

Alapvető stílusok

Név
Logó
Színek
Betűtípusok
Grid rendszer

Komponensek

Gombok
Űrlapok
Egyéb elemek

Shoprenter Arculati Útmutató

Összegyűjtöttük egy helyre azokat az arculati elemeket és sajátosságokat, amelyek tükrözik a Shoprenter és a mögötte álló csapat értékeit és kultúráját.

Ezeket bátran használhatod a velünk való együttműködés során.

Név

A Shoprenter egy szó, leírva nagy "S"-sel és kis "r"-rel. Korábban nagy "S"-sel és nagy "R"-rel írtuk, de az idők változnak.

ÚJ

Shoprenter

RÉGI

ShopRenter

Logó

A Shoprenter Logó anyagait egy csomagban letöltheted itt! 👇

Logócsomag letöltése

ÚJ

RÉGI

Horizontális

Vertikális

Ikon

Duotone

Színek

Fő színek

Másodlagos színek

Kiegészítő színek

Betűtípusok

A Shoprenter webes és print megjelenésében a Poppins és a Gilroy stílusok számítanak elfogadottnak. Websafe betűtípusnak a Verdana-t használhatjuk. A készleteket a következő linkeken tudjátok letölteni.

Poppins Gilroy

Poppins

Poppins Light 300

Poppins Regular 400

Poppins Medium 500

Poppins SemiBold 600

Poppins Bold 700

Poppins ExtraBold 800

Poppins Light 300 Italic

Poppins Regular 400 Italic

Poppins Medium 500 Italic

Poppins SemiBold 600 Italic

Poppins Bold 700 Italic

Poppins ExtraBold 800 Italic

Font size

Line height

H1 60px

Heading 1 Bold

72px

H2 48px

Heading 2 Bold

60px

H3 30px

Heading 3 Bold

38px

H3 30px

Heading 3 Regular

38px

H4 20px

Heading 4 Bold

28px

H5 20px

Heading 5 Regular

28px

H6 16px

Heading 6 Bold

28px

P 20px Body Regular Highlighted 28px

P 16px Body Light 24px

P 16px Body Regular 24px

P 16px Body Medium 24px

P 14px Small Regular 20px

P 12px Extra Small Regular 20px

P 12px Caption Medium 16px

Grid rendszer

A Shoprenteres látványtervek elkészítéséhez 12 oszlops Grid systemt használunk. Használhatjuk Figmában vagy a Figma fileban lévő Grid rendszer kiexportálásával Photoshopban.

Figma Grid rendszer

Komponensek

Gombok

Elsődleges gomb stílusnak használjuk a Shoprenter Zöld szín gradiens változatát.

Button 63 px

Nagy

<a class="btn btn-primary btn-lg" href="#" role="button">Button</a>

Button 54 px

Alap

<a class="btn btn-primary btn" href="#" role="button">Button</a>

Button 45 px

Kicsi

<a class="btn btn-primary btn-sm" href="#" role="button">Button</a>

Button 36 px

Nagyon kicsi

<a class="btn btn-primary btn-xs" href="#" role="button">Button</a>

Állapotok

Button

Inaktív

<a class="btn btn-primary btn-sm disabled" href="#" role="button">Button</a>

Gomb ikonnal

<a class="btn btn-primary btn-sm btn-with-icon" href="#" role="button">
    <span class="btn-icon">
        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <use xlink:href="#icon-loading-white" x="0" y="0" />
        </svg>
    </span>
    Button
</a>

Button 63 px

Nagy

<a class="btn btn-outline-primary btn-lg" href="#" role="button">Button</a>

Button 54 px

Alap

<a class="btn btn-outline-primary btn" href="#" role="button">Button</a>

Button 45 px

Kicsi

<a class="btn btn-outline-primary btn-sm" href="#" role="button">Button</a>

Button 36 px

Nagyon kicsi

<a class="btn btn-outline-primary btn-xs" href="#" role="button">Button</a>

Állapotok

Button

Inaktív

<a class="btn btn-outline-primary btn-sm disabled" href="#" role="button">Button</a>

Gomb ikonnal

<a class="btn btn-outline-primary btn-sm btn-with-icon" href="#" role="button">
    <span class="btn-icon">
        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <use xlink:href="#icon-loading" x="0" y="0" />
        </svg>
    </span>
    Button
</a>

Link

Link

Link

<div class="row-btn-link">
    <a class="btn btn-link" href="#" role="button">Link</a>
</div>
<div class="row-btn-link">
    <a class="btn btn-link btn-link-lg" href="#" role="button">Link</a>
</div>

Link inaktív

Link inaktív

Inaktív

<div class="row-btn-link">
    <a class="btn btn-link disabled" href="#" role="button">Link inaktív</a>
</div>
<div class="row-btn-link">
    <a class="btn btn-link btn-link-lg disabled" href="#" role="button">Link inaktív</a>
</div>

Link ikonnal

<div class="row-btn-link">
    <a class="btn btn-link btn-with-icon" href="#" role="button">
        <span class="btn-icon">
            <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#icon-files" x="0" y="0" />
            </svg>
        </span>
        Link ikonnal
    </a>
</div>

Havi fizetés Negyedéves fizetés Éves fizetés

Gomb csoport

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-sm btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Havi fizetés
    </label>
    <label class="btn btn-sm btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Negyedéves fizetés
    </label>
    <label class="btn btn-sm btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off"> Éves fizetés
    </label>
</div>

Űrlapok

Input

<div class="form-group">
    <label for="input-example" class="form-control-label">Címke</label>
    <input type="text" class="form-control" id="input-example" aria-describedby="InputHelp"
           placeholder="Input"/>
</div>

Inaktív

<div class="form-group">
    <input type="text" class="form-control" id="input-example" aria-describedby="InputHelp" placeholder="Input" readonly/>
</div>

Valid

<div class="form-group">
    <input type="text" class="form-control is-valid" id="input-example" aria-describedby="InputHelp" placeholder="Input"/>
</div>

Hiba

<div class="form-group">
    <input type="text" class="form-control is-invalid" id="input-example" aria-describedby="InputHelp" placeholder="Input"/>
    <div class="invalid-feedback">
        Hiba szövege
    </div>
</div>

Input gombbal

<div class="input-group input-group-with-button">
    <input type="text" class="form-control" placeholder="Input" aria-label="Input with button" aria-describedby="input-with-button">
    <div class="input-group-append">
        <button class="btn btn-primary" type="button">Button</button>
    </div>
</div>

Select

<div class="form-group">
    <select class="custom-select form-control" id="inlineFormCustomSelect">
        <option selected value="1">Select</option>
        <option value="2">Elem 2</option>
        <option value="3">Elem 3</option>
    </select>
</div>

Inaktív

<div class="form-group">
    <select class="custom-select form-control" id="inlineFormCustomSelect" disabled>
        <option selected value="1">Select</option>
        <option value="2">Elem 2</option>
        <option value="3">Elem 3</option>
    </select>
</div>

Alapértelmezett

Checkbox

<div class="custom-control custom-checkbox mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlChechbox">
    <label class="custom-control-label" for="customControlChechbox">Alapértelmezett</label>
</div>

Inaktív

Inaktív

<div class="custom-control custom-checkbox mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlChechboxDisabled" disabled>
    <label class="custom-control-label" for="customControlChechboxDisabled">Inaktív</label>
</div>

Kiválasztott

Kiválasztott checkbox

<div class="custom-control custom-checkbox mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlChechboxDisabled" checked>
    <label class="custom-control-label" for="customControlChechboxDisabled">Kiválasztott</label>
</div>

Radio

Radio

<div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlRadio" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlRadio">Radio</label>
</div>

Radio

Kiválasztott radio

<div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlRadioChecked" name="radio-checked" checked>
    <label class="custom-control-label" for="customControlRadioChecked">Radio</label>
</div>

Lapozó

<div class="sr-sg-pagination">
    <nav aria-label="Navigáció">
        <ul class="pagination">
            <li class="page-item page-item-icon">
                <a class="page-link" href="#" aria-label="Első">
        <span aria-hidden="true">
            <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 8.59459L8.27027 4.86486L12 1.13514L10.8649 0L6 4.86486L10.8649 9.72973L12 8.59459Z" fill="#818E9E"/>
                <path d="M6 8.59459L2.27027 4.86486L6 1.13514L4.86486 0L0 4.86486L4.86486 9.72973L6 8.59459Z" fill="#818E9E"/>
            </svg>
        </span>
                    <span class="sr-only">Első</span>
                </a>
            </li>
            <li class="page-item page-item-icon">
                <a class="page-link" href="#" aria-label="Előző">
        <span aria-hidden="true">
            <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6 8.59459L2.27027 4.86486L6 1.13514L4.86487 0L0 4.86486L4.86487 9.72973L6 8.59459Z" fill="#818E9E"/>
            </svg>

        </span>
                    <span class="sr-only">Előző</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item page-item-icon">
                <a class="page-link" href="#" aria-label="Következő">
        <span aria-hidden="true">
            <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 8.59459L3.72973 4.86486L0 1.13514L1.13513 0L6 4.86486L1.13513 9.72973L0 8.59459Z" fill="#818E9E"/>
            </svg>
        </span>
                    <span class="sr-only">Következő</span>
                </a>
            </li>
            <li class="page-item page-item-icon">
                <a class="page-link" href="#" aria-label="Utolsó">
        <span aria-hidden="true">
            <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 8.59459L3.72973 4.86486L0 1.13514L1.13513 0L6 4.86486L1.13513 9.72973L0 8.59459Z" fill="#818E9E"/>
                <path d="M6 8.59459L9.72973 4.86486L6 1.13514L7.13514 0L12 4.86486L7.13514 9.72973L6 8.59459Z" fill="#818E9E"/>
            </svg>

        </span>
                    <span class="sr-only">Utolsó</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

Egyéb elemek

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Számozott lista

<ol class="sr-list">
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ol>

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Pontozott lista

<ul class="sr-list sr-piped-list">
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

Tab1 tartalom

Tab2 tartalom

Tab3 tartalom

Tab

<div class="sg-nav-tabs-wrapper sr-nav-tabs-wrapper">
    <ul class="nav nav-tabs sr-nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link accordion-toggle active" id="tab1-tab" data-toggle="tab" href="#tab-tab1" role="tab" data-tab="#tab_tab1">
                <span>Tab1</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link accordion-toggle" id="tab2-tab" data-toggle="tab" href="#tab-tab2" role="tab" data-tab="#tab_tab2">
                <span>Tab2</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link accordion-toggle" id="tab3-tab" data-toggle="tab" href="#tab-tab3" role="tab" data-tab="#tab_tab3">
                <span>Tab3</span>
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade show active" id="tab-tab1" role="tabpanel" aria-labelledby="tab1-tab" data-tab="#tab_tab1">
            Tab1 tartalom
        </div>
        <div class="tab-pane fade" id="tab-tab2" role="tabpanel" aria-labelledby="tab2-tab" data-tab="#tab_tab2">
            Tab2 tartalom
        </div>
        <div class="tab-pane fade" id="tab-tab3" role="tabpanel" aria-labelledby="tab3-tab" data-tab="#tab_tab3">
            Tab3 tartalom
        </div>

    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At commodi facere iure quae quos! Aut blanditiis deserunt ipsa reiciendis sit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, sapiente.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, vero voluptatum! Maxime.

Tab

<div class="sg-nav-tabs-wrapper sr-nav-tabs-wrapper sr-vertical-tabs">
    <div class="row">
        <div class="col-md-3">
            <ul class="nav nav-tabs sr-nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link accordion-toggle active" id="vtab1-tab" data-toggle="tab" href="#tab-vtab1" role="tab" data-tab="#tab_vtab1">
                        <span>Tab1</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link accordion-toggle" id="vtab2-tab" data-toggle="tab" href="#tab-vtab2" role="tab" data-tab="#tab_vtab2">
                        <span>Tab2</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link accordion-toggle" id="vtab3-tab" data-toggle="tab" href="#tab-vtab3" role="tab" data-tab="#tab_vtab3">
                        <span>Tab3</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-md-9">
            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-vtab1" role="tabpanel" aria-labelledby="vtab1-tab" data-tab="#tab_vtab1">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At commodi facere iure quae quos! Aut blanditiis deserunt ipsa reiciendis sit.
                    </p>
                </div>
                <div class="tab-pane fade" id="tab-vtab2" role="tabpanel" aria-labelledby="vtab2-tab" data-tab="#tab_vtab2">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, sapiente.</p>
                </div>
                <div class="tab-pane fade" id="tab-vtab3" role="tabpanel" aria-labelledby="vtab3-tab" data-tab="#tab_vtab3">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, vero voluptatum!
                        Maxime.</p>
                </div>

            </div>
        </div>
    </div>
</div>

Anim pariatur cliche reprehenderit, eunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, eunt you probably haven't heard of them accusamus labore sustainable VHS.

Accordion

<div class="accordion" id="sr-accordionexample">
    <div class="sr-accordion-item">
        <div id="sr-accordion-item-1">
            <h6 class="mb-0">
                <button class="btn btn-accordion collapsed" type="button" data-toggle="collapse" data-target="#sr-accordion-1" aria-expanded="false" aria-controls="sr-accordion-1">
                     <span class="sr-accordion-arrow">
                        <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.6 7.7002L6 3.10019L1.4 7.70019L1.22392e-07 6.30019L6 0.300194L12 6.3002L10.6 7.7002Z" fill="#282828"/>
                        </svg>
                    </span>
                    Zárt Accordion Cím
                </button>
            </h6>
        </div>
        <div id="sr-accordion-1" class="collapse" aria-labelledby="sr-accordion-item-1" data-parent="#sr-accordionexample">
            <div class="sr-accordion-body">
                Anim pariatur cliche reprehenderit, eunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
</div>
<div class="accordion mt-5" id="sr-accordionexample2">
    <div class="sr-accordion-item">
        <div id="sr-accordion-item-1">
            <h6 class="mb-0">
                <button class="btn btn-accordion" type="button" data-toggle="collapse" data-target="#sr-accordion-2" aria-expanded="true" aria-controls="sr-accordion-2">
                     <span class="sr-accordion-arrow">
                        <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.6 7.7002L6 3.10019L1.4 7.70019L1.22392e-07 6.30019L6 0.300194L12 6.3002L10.6 7.7002Z" fill="#282828"/>
                        </svg>
                    </span>
                    Nyitott Accordion Cím
                </button>
            </h6>
        </div>
        <div id="sr-accordion-2" class="collapse show" aria-labelledby="sr-accordion-item-2" data-parent="#sr-accordionexample2">
            <div class="sr-accordion-body">
                Anim pariatur cliche reprehenderit, eunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
</div>

Sikeres foglalás!

Siker

<div class="sr-notice bg-success">
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon-check-circle" x="0" y="0" />
    </svg>
    <span>Sikeres foglalás!</span>
</div>

Sikeres foglalás!

Figyelmeztetés

<div class="sr-notice bg-warning">
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon-check-circle" x="0" y="0" />
    </svg>
    <span>Sikeres foglalás!</span>
</div>

Érvénytelen dátum

Hiba

<div class="sr-notice bg-danger">
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon-close-circle" x="0" y="0" />
    </svg>
    <span>Érvénytelen fátum</span>
</div>

Információ

Információ

<div class="sr-notice bg-info">
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon-check-circle" x="0" y="0" />
    </svg>
    <span>Információ</span>
</div>

Alert bezárás gombbal

Alert

<div class="alert alert-info alert-dismissible sr-alert fade show" role="alert">
    <span>Alert bezárás gombbal</span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon-close-circle" x="0" y="0" />
            </svg>
        </span>
    </button>
</div>

Slider

<div class="sr-slick-slider sr-sg-slider">
    <div class="sr-slick-item"></div>
    <div class="sr-slick-item"></div>
    <div class="sr-slick-item"></div>
    <div class="sr-slick-item"></div>
    <div class="sr-slick-item"></div>
</div>

Videó

                     <div class="sr-video-wrapper">
                        <div class="sr-video">
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/gxBambeiii4?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                    </div>

Oszlop 1	Oszlop 2	Oszlop 3	Oszlop 4	Oszlop 5
Lorem	consectetur	2.25	2200	4000
Ipsum	adipiscing	4.0	1200	2000
Dolor	suspendisse	3.5	2000	3400
Sit	enim	2.5	1000	1000
Amet	malesuada			1.25

Táblázat

<div class="table-responsive">
    <table class="table table-striped">
        <thead class="thead-light">
        <tr>
            <th scope="col">Oszlop 1</th>
            <th scope="col">Oszlop 2</th>
            <th scope="col" class="text-right">Oszlop 3</th>
            <th scope="col" class="text-right">Oszlop 4</th>
            <th scope="col" class="text-right">Oszlop 5</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td scope="row">Lorem</td>
            <td>consectetur</td>
            <td class="text-right">2.25</td>
            <td class="text-right">2200</td>
            <td class="text-right">4000</td>
        </tr>
        <tr>
            <td scope="row">Ipsum</td>
            <td>adipiscing</td>
            <td class="text-right">4.0</td>
            <td class="text-right">1200</td>
            <td class="text-right">2000</td>
        </tr>
        <tr>
            <td scope="row">Dolor</td>
            <td>suspendisse</td>
            <td class="text-right">3.5</td>
            <td class="text-right">2000</td>
            <td class="text-right">3400</td>
        </tr>
        <tr>
            <td scope="row">Sit</td>
            <td>enim</td>
            <td class="text-right">2.5</td>
            <td class="text-right">1000</td>
            <td class="text-right">1000</td>
        </tr>
        <tr>
            <td scope="row">Amet</td>
            <td colspan="3">malesuada</td>
            <td class="text-right">1.25</td>
        </tr>
        </tbody>
    </table>
</div>

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Idézet

<blockquote class="blockquote">
    <p class="mb-0">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
</blockquote>

Vágólapra másolva