Peppoš v2 — interní

Styleguide

Komponenty design systému postavené na tokenech vytažených z Figmy (viz docs/redesign/PLAN.md, Fáze 1). Stránka je interní — mimo produkci se neindexuje a nemá vlastní nav položku.

Typografie

Nadpis sekce

Jediná správná podoba nadpisu sekce: .v2-section-title — 28 / 37 px, běžný řez, tučně jen ta část, kterou designér vysázel tučně (<strong>). Sekce si k tomu doplňuje už jen odstup a zarovnání. Dokud si tuhle trojici psala každá stránka zvlášť, vycházel nadpis místy na 36,4 nebo 35 px.

Barvy

Odstupy · rádiusy · stíny

Mřížka je 1140 px / 12 sloupců / 24 px mezera. Odstupy jdou po 4 px; hodnota mimo tuhle řadu je skoro vždy nedopatření.

Odstupy

Rádiusy a stíny

Tlačítka

Stav po najetí a stisku je zapojený v CSS — najeďte myší přímo na tlačítko.

Začít zdarma Začít zdarma Začít zdarma Spustit sandbox Spustit sandbox Spustit sandbox Přihlásit Začít zdarma Spustit sandbox Vyhledávání v síti Peppol

Odmítnout Zobrazit dokumentaci API Prohlédnout API dokumentaci Jak integrace funguje Naplánovat schůzku Přihlásit se k odběru Odeslat zprávu týmu Dativery Zpět na články RSS feed Sdílet Vybrat plán Vybrat plán

Karty · chipy · segmenty · badge

Karta s ikonou

Jedna komponenta pro karty funkcí i karty souborů — dřív to byly dvě skoro shodné sady tříd, a tím pádem i dvě kopie stejné chyby. Liší se jen variantou: --feature má odsazení 30 px a výšku 330, --doctype odsazení 30/20 a výšku 311. Ikona má vždy výšku 46 px a vlastní šířku; rozměry se čtou přímo ze souboru, protože ikony nejsou čtvercové (32, 54, 58, 71, 95, 130 …).

Sledujte stavy v reálném čase

Varianta --feature: odsazení 30 px, minimální výška 330, jemné lavendrové pozadí.

Faktura

Varianta --doctype: odsazení 30/20, minimální výška 311, bílé pozadí.

Stupně krytí

Karty funkcí nemají jednotnou výplň. Grafik jim dal jednu barvu #edeff5 ve čtyřech stupních krytí nad bílou a rozmístil je po mřížce nepravidelně (Figma 287:17443). Kdo je sjednotí, zahodí informaci — stalo se mi to. Stupeň se přiděluje modifikátorem --tint-100/70/50/40.

Krytí 100 %

Modifikátor --tint-100. Nad bílou dává odstín, který má návrh v příslušné buňce mřížky.

Krytí 70 %

Modifikátor --tint-70. Nad bílou dává odstín, který má návrh v příslušné buňce mřížky.

Krytí 50 %

Modifikátor --tint-50. Nad bílou dává odstín, který má návrh v příslušné buňce mřížky.

Krytí 40 %

Modifikátor --tint-40. Nad bílou dává odstín, který má návrh v příslušné buňce mřížky.

Kalkulačka

Karta 461×437 s výplní #f9fafc a rámečkem 3 px #e7e9f1 (Figma 257:10737). Řádky jsou 60 px s obsahem na střed, linku pod hlavičkou nese horní rámeček prvního řádku. Posuvník počtu má 116×40 a znaménka jsou tenké tahy 11×11, ne čtvercová tlačítka; dotykový cíl je přesto 23×38.

Faktury Za měsíc

Plán ZDARMA

Poslané

Cena plánu 0,00 Kč

= 0,00 Kč

Ceníková karta

Zvýrazněná karta má rámeček 3 px, ne 2 — v rastru návrhu vychází 2,6 a je snadné ji zaokrouhlit špatně. Modré plusko patří jen prvnímu řádku zvýrazněné karty, ostatní jsou zelená. Tlačítko „Vybrat plán“ má dvě barevné varianty.

Definiční box

Box 170×200 z „Co je Peppol / Co Peppol není“. Odsazení je 32 shora, 20 po stranách a 24 zdola — se symetrickými 32 vyroste delší text nad návrhových 200. Nadpis nad trojicí je vycentrovaný, ne u levého kraje.

Zabezpečená mezinárodní síť pro výměnu e-dokumentů.

Nástroj pro 100% automatizaci účetnictví.

Akordeon (otázky)

Tabulka

Formulář · stepper

Varianta kontaktního formuláře

Kontaktní formulář má podle Figmy vlastní rozměr — pole 40 px (ne 44), písmo 13 px, průhledný rám na bílém poli. Šipku selectu sdílí se zbytkem webu přes --v2-select-chevron; každý <select> ji musí mít spolu s appearance: none, jinak si prohlížeč vykreslí nativní šipku systému a stejné pole vypadá jinak na macOS, Windows i Androidu.

Přepínače ceníku

Dvojice přepínačů nad ceníkem. Sazba DPH se na produkci vybírá podle domény (peppos.sk → SK), měna podle jazyka — viz F2 v plánu.

Odznaky

Odznak „Certifikovaný Access Point“ je lokalizovaná grafika od grafika — překládá se i logo (PEPPOŠ / PEPPOSH), takže se nedá poskládat v CSS. Cestu vrací partial "v2/illustration.html" "c_ap" podle jazyka stránky.

Pečeť má dvě varianty pro různý podklad — liší se patkou pod logem Dativery, aby s ním splynula. Základní má tmavou patku (na tmavé pozadí), světlá bílou (na světlé). Nasadit špatnou variantu se pozná právě podle té patky. Modrá mini není ke stažení — používá se uvnitř ilustrace v sekci „Jak funguje e-faktura“. Žlutá mini (dodáno 28. 8., dřív chybělo — Q36) je jedna ze čtyř variant ke stažení, viz sekce „Odznaky“ na homepage.

základní · tmavé pozadí

světlá · světlé pozadí

modrá mini · 50×50

žlutá mini · 50×50

Odznak „Registrován v síti Peppol“ — jedna ze čtyř variant ke stažení pro weby zákazníků (N3). Text je HTML kvůli překladu do 6 jazyků, tmavý čtverec s ikonou je exportovaná grafika.

Registrován v síti Peppol small · 200×35 Peppol mini · 100×35

Bublinová poznámka

Číslovaná časová osa

Index komponent

Všech 152 rodin tříd, které dnes existují v components.css. Seznam se generuje ze samotného CSS, takže po přidání sekce nemůže zastarat. Tučně zvýrazněné se recyklují napříč stránkami — než založíš novou třídu, hledej nejdřív tady. Ostatní jsou layouty konkrétních stránek; ty se vidí přímo na webu, ne tady.

• .v2-404
• .v2-about-dativery
• .v2-accordion-body
• .v2-accordion-item
• .v2-affects
• .v2-ap
• .v2-api-docs
• .v2-api-env
• .v2-api-page
• .v2-api-scenarios
• .v2-api-steps
• .v2-api-top
• .v2-article-band
• .v2-badge
• .v2-badges
• .v2-blog-article
• .v2-blog-author
• .v2-blog-authors
• .v2-blog-btn
• .v2-blog-card
• .v2-blog-detail
• .v2-blog-grid
• .v2-blog-header
• .v2-blog-list
• .v2-blog-pagination
• .v2-btn
• .v2-bubble
• .v2-burger-icon
• .v2-button-showcase
• .v2-calc
• .v2-card
• .v2-color-swatch
• .v2-connect
• .v2-connect-dativery
• .v2-connect-faq
• .v2-contact-billing
• .v2-contact-copy
• .v2-contact-field
• .v2-contact-form
• .v2-contact-hero
• .v2-container
• .v2-cookie-actions
• .v2-cookie-bar
• .v2-cookie-content
• .v2-cookie-icon
• .v2-cookie-text
• .v2-countdown
• .v2-cta
• .v2-doctypes
• .v2-doplnit
• .v2-eyebrow
• .v2-faq-page
• .v2-features
• .v2-field
• .v2-footer
• .v2-footer-ap
• .v2-footer-api-link
• .v2-footer-badges
• .v2-footer-bottom
• .v2-footer-col
• .v2-footer-contact-block
• .v2-footer-dativery
• .v2-footer-grid
• .v2-footer-input
• .v2-footer-iso
• .v2-footer-lead
• .v2-footer-legal
• .v2-footer-made
• .v2-footer-social
• .v2-footer-subscribe
• .v2-grid
• .v2-header
• .v2-hero
• .v2-how
• .v2-howsaas
• .v2-chip
• .v2-icon-card
• .v2-inline-link
• .v2-input
• .v2-label
• .v2-langswitch
• .v2-legal-content
• .v2-legal-page
• .v2-mainmenu
• .v2-mainmenu-burger
• .v2-mainmenu-link
• .v2-mainmenu-nav
• .v2-mainmenu-underline
• .v2-mobile-menu
• .v2-mobile-menu-cta
• .v2-mobile-menu-inner
• .v2-mobile-menu-languages
• .v2-mobile-menu-link
• .v2-mobile-menu-sections
• .v2-page-intro
• .v2-pdesc
• .v2-peppol-badge
• .v2-pid
• .v2-pid-anatomy
• .v2-pid-page-about
• .v2-pid-page-format
• .v2-pid-page-heading
• .v2-pid-page-step
• .v2-pid-page-steps
• .v2-pid-table
• .v2-pid-table-scroll
• .v2-pnet-articles
• .v2-pnet-card
• .v2-pnet-definition
• .v2-pnet-intro
• .v2-pnet-model
• .v2-pnet-pillars
• .v2-pnet-practice
• .v2-pricing
• .v2-prose-stack
• .v2-responsive-table
• .v2-saas-about
• .v2-saas-api-hero
• .v2-saas-benefits
• .v2-saas-contact
• .v2-saas-formats
• .v2-saas-home-hero
• .v2-saas-platform
• .v2-saas-pricing
• .v2-saas-references
• .v2-saas-start
• .v2-saas-whitelabel
• .v2-sapi
• .v2-section-title
• .v2-segment
• .v2-select
• .v2-sr-only
• .v2-stat-label
• .v2-stat-number
• .v2-stat-section
• .v2-stat-tile
• .v2-stepper
• .v2-submenu
• .v2-submenu-actions
• .v2-submenu-search
• .v2-submenu-tab
• .v2-submenu-tabs
• .v2-table
• .v2-table-scroll
• .v2-textarea
• .v2-timeline
• .v2-timeline-num
• .v2-timeline-step
• .v2-timeline-text
• .v2-timeline-title
• .v2-toggle-group
• .v2-what-is