Ez az oldal végigveszi a CMS összes blokktípusát és mezőtípusát, hogy egyben látható legyen a teljes építőelem-készlet.
Ez egy section_text blokk: van eyebrow, cím és WYSIWYG törzs. Tartalmazhat linket, valamint listát:
Az ikon a Lineicons készletből jön (icon class mező).
A leírás egy textarea mező, több sor is elfér benne.
Négy elem egy 4 oszlopos rácsban jelenik meg.
Az editorban szabadon átrendezhető és bővíthető.
Ez egy media_row elem. Az arány mező nincs beállítva, így a méretezés tartalomvezérelt (a korábbi viselkedés).
A kép és a szöveg azonos szélességet kap. A media_right itt be van kapcsolva, így a média a jobb oldalon van.
A kép kétszer olyan széles, mint a szöveg.
A szöveg kétszer olyan széles, mint a kép. Hosszabb leíró szövegekhez hasznos, ahol a média csak illusztráció.
A kép háromszor olyan széles, mint a szöveg.
A szöveg háromszor olyan széles, mint a kép.
Egy demó oldal, ami minden elérhető blokkot tartalmaz.
Igen, az editorban szabadon húzhatók és sorrendezhetők.
Két oszlopos harmonikaként, automatikusan elosztva.
Igen — minden nyelv külön, önálló oldal (hu/en/de).
Igen, a media_row elem fogad beágyazott URL-t vagy feltöltött fájlt.
Ez a szabad richtext blokk: tetszőleges WYSIWYG tartalom, fejlécekkel, listákkal és linkekkel.
Záró bekezdés belső horgony linkkel.
Az alábbi link elhalványul, ha rá viszed az egeret — vidd rám a kurzort.
Hogyan készül? Egy CSS opacity-átmenettel. A linkre tedd rá az ud-fading-link osztályt, a stíluslap (resources/sass/app.scss) pedig ennyit tartalmaz:
.ud-fading-link {
transition: opacity 0.4s ease;
&:hover { opacity: 0.3; }
}A transition teszi folyamatossá az elhalványulást, a :hover állapot pedig 0.3-ra csökkenti az átlátszatlanságot.
A lap tetején látható hero egy valódi, élő hero, és ezen az oldalon 1:4 magasságra (rövid banner) van állítva — vizsgáld meg, hogyan épül fel.
Hol szerkeszthető? A Page szerkesztőben a „Hero & CTA” összecsukható panelben (alapból zárva). Itt állítható a cím/alcím/leírás/gomb, a háttérkép és -videó (médiatár), a badge és a magasság (100vh / 1:3 / 1:4 / 1:5 / 1:6).
Megjelenés: a hero minden olyan oldalon megjelenik, amelynek van hero címe vagy háttérképe (a főoldalon mindig). A háttér üres mezőknél a régi statikus asset-ekre esik vissza.
532 Lineicons — a class azonosító minden ikon alatt.
lni-500px |
lni-add-files |
lni-adobe |
lni-agenda |
lni-airbnb |
lni-alarm-clock |
lni-alarm |
lni-amazon-original |
lni-amazon-pay |
lni-amazon |
lni-ambulance |
lni-amex |
lni-anchor |
lni-android-original |
lni-android |
lni-angellist |
lni-angle-double-down |
lni-angle-double-left |
lni-angle-double-right |
lni-angle-double-up |
lni-angular |
lni-apartment |
lni-app-store |
lni-apple-music |
lni-apple-pay |
lni-apple |
lni-archive |
lni-arrow-down-circle |
lni-arrow-down |
lni-arrow-left-circle |
lni-arrow-left |
lni-arrow-right-circle |
lni-arrow-right |
lni-arrow-top-left |
lni-arrow-top-right |
lni-arrow-up-circle |
lni-arrow-up |
lni-arrows-horizontal |
lni-arrows-vertical |
lni-atlassian |
lni-aws |
lni-azure |
lni-backward |
lni-baloon |
lni-ban |
lni-bar-chart |
lni-basketball |
lni-behance-original |
lni-behance |
lni-bi-cycle |
lni-bitbucket |
lni-bitcoin |
lni-blackboard |
lni-blogger |
lni-bluetooth-original |
lni-bluetooth |
lni-bold |
lni-bolt-alt |
lni-bolt |
lni-book |
lni-bookmark-alt |
lni-bookmark |
lni-bootstrap |
lni-bricks |
lni-bridge |
lni-briefcase |
lni-brush-alt |
lni-brush |
lni-btc |
lni-bubble |
lni-bug |
lni-bulb |
lni-bullhorn |
lni-burger |
lni-bus |
lni-cake |
lni-calculator |
lni-calendar |
lni-camera |
lni-candy-cane |
lni-candy |
lni-capsule |
lni-car-alt |
lni-car |
lni-caravan |
lni-cart-full |
lni-cart |
lni-certificate |
lni-check-box |
lni-checkmark-circle |
lni-checkmark |
lni-chef-hat |
lni-chevron-down-circle |
lni-chevron-down |
lni-chevron-left-circle |
lni-chevron-left |
lni-chevron-right-circle |
lni-chevron-right |
lni-chevron-up-circle |
lni-chevron-up |
lni-chrome |
lni-chromecast |
lni-circle-minus |
lni-circle-plus |
lni-clipboard |
lni-close |
lni-cloud-check |
lni-cloud-download |
lni-cloud-network |
lni-cloud-sync |
lni-cloud-upload |
lni-cloud |
lni-cloudflare |
lni-cloudy-sun |
lni-code-alt |
lni-code |
lni-codepen |
lni-coffee-cup |
lni-cog |
lni-cogs |
lni-coin |
lni-comments-alt |
lni-comments-reply |
lni-comments |
lni-compass |
lni-connectdevelop |
lni-construction-hammer |
lni-construction |
lni-consulting |
lni-control-panel |
lni-cool |
lni-cpanel |
lni-creative-commons |
lni-credit-cards |
lni-crop |
lni-cross-circle |
lni-crown |
lni-css3 |
lni-cup |
lni-customer |
lni-cut |
lni-dashboard |
lni-database |
lni-delivery |
lni-dev |
lni-diamond-alt |
lni-diamond |
lni-digitalocean |
lni-diners-club |
lni-dinner |
lni-direction-alt |
lni-direction-ltr |
lni-direction-rtl |
lni-direction |
lni-discord |
lni-discover |
lni-display-alt |
lni-display |
lni-docker |
lni-dollar |
lni-domain |
lni-download |
lni-dribbble |
lni-drop |
lni-dropbox-original |
lni-dropbox |
lni-drupal-original |
lni-drupal |
lni-dumbbell |
lni-edge |
lni-empty-file |
lni-enter |
lni-envato |
lni-envelope |
lni-eraser |
lni-euro |
lni-exit-down |
lni-exit-up |
lni-exit |
lni-eye |
lni-facebook-filled |
lni-facebook-messenger |
lni-facebook-original |
lni-facebook-oval |
lni-facebook |
lni-figma |
lni-files |
lni-firefox-original |
lni-firefox |
lni-fireworks |
lni-first-aid |
lni-flag-alt |
lni-flag |
lni-flags |
lni-flickr |
lni-flower |
lni-folder |
lni-forward |
lni-frame-expand |
lni-fresh-juice |
lni-friendly |
lni-full-screen |
lni-funnel |
lni-gallery |
lni-game |
lni-gatsby |
lni-gift |
lni-git |
lni-github-original |
lni-github |
lni-goodreads |
lni-google-drive |
lni-google-pay |
lni-google-wallet |
lni-google |
lni-graduation |
lni-graph |
lni-grid-alt |
lni-grid |
lni-grow |
lni-hacker-news |
lni-hammer |
lni-hand |
lni-handshake |
lni-happy |
lni-harddrive |
lni-headphone-alt |
lni-headphone |
lni-heart-filled |
lni-heart-monitor |
lni-heart |
lni-helicopter |
lni-helmet |
lni-help |
lni-highlight-alt |
lni-highlight |
lni-home |
lni-hospital |
lni-hourglass |
lni-html5 |
lni-image |
lni-imdb |
lni-inbox |
lni-indent-decrease |
lni-indent-increase |
lni-infinite |
lni-information |
lni-instagram-filled |
lni-instagram-original |
lni-instagram |
lni-invention |
lni-invest-monitor |
lni-investment |
lni-island |
lni-italic |
lni-java |
lni-javascript |
lni-jcb |
lni-joomla-original |
lni-joomla |
lni-jsfiddle |
lni-juice |
lni-key |
lni-keyboard |
lni-keyword-research |
lni-laptop-phone |
lni-laptop |
lni-laravel |
lni-layers |
lni-layout |
lni-leaf |
lni-library |
lni-license |
lni-lifering |
lni-line-dashed |
lni-line-dotted |
lni-line-double |
lni-line-spacing |
lni-line |
lni-lineicons-alt |
lni-lineicons |
lni-link |
lni-linkedin-original |
lni-linkedin |
lni-list |
lni-lock-alt |
lni-lock |
lni-magento |
lni-magnet |
lni-magnifier |
lni-mailchimp |
lni-map-marker |
lni-map |
lni-markdown |
lni-mashroom |
lni-mastercard |
lni-medium |
lni-menu |
lni-mic |
lni-microphone |
lni-microscope |
lni-microsoft-edge |
lni-microsoft |
lni-minus |
lni-mobile |
lni-money-location |
lni-money-protection |
lni-more-alt |
lni-more |
lni-mouse |
lni-move |
lni-music |
lni-netlify |
lni-network |
lni-night |
lni-nodejs-alt |
lni-nodejs |
lni-notepad |
lni-npm |
lni-offer |
lni-opera |
lni-package |
lni-page-break |
lni-pagination |
lni-paint-bucket |
lni-paint-roller |
lni-pallet |
lni-paperclip |
lni-patreon |
lni-pause |
lni-paypal-original |
lni-paypal |
lni-pencil-alt |
lni-pencil |
lni-phone-set |
lni-phone |
lni-php |
lni-pie-chart |
lni-pilcrow |
lni-pin |
lni-pinterest |
lni-pizza |
lni-plane |
lni-play-store |
lni-play |
lni-playstation |
lni-plug |
lni-plus |
lni-pointer-down |
lni-pointer-left |
lni-pointer-right |
lni-pointer-top |
lni-pointer |
lni-popup |
lni-postcard |
lni-pound |
lni-power-switch |
lni-printer |
lni-producthunt |
lni-protection |
lni-pulse |
lni-pyramids |
lni-python |
lni-question-circle |
lni-quora |
lni-quotation |
lni-radio-button |
lni-rain |
lni-react |
lni-reddit |
lni-reload |
lni-remove-file |
lni-reply |
lni-restaurant |
lni-revenue |
lni-road |
lni-rocket |
lni-rss-feed |
lni-ruler-alt |
lni-ruler-pencil |
lni-ruler |
lni-rupee |
lni-sad |
lni-save |
lni-school-bench-alt |
lni-school-bench |
lni-scooter |
lni-scroll-down |
lni-search-alt |
lni-search |
lni-select |
lni-seo |
lni-service |
lni-share-alt-1 |
lni-share-alt |
lni-share |
lni-shield |
lni-shift-left |
lni-shift-right |
lni-ship |
lni-shopify |
lni-shopping-basket |
lni-shortcode |
lni-shovel |
lni-shuffle |
lni-signal |
lni-sketch |
lni-skipping-rope |
lni-skype |
lni-slack-line |
lni-slack |
lni-slice |
lni-slideshare |
lni-slim |
lni-smile |
lni-snapchat |
lni-sort-alpha-asc |
lni-sort-amount-asc |
lni-sort-amount-dsc |
lni-soundcloud-original |
lni-soundcloud |
lni-speechless |
lni-spellcheck |
lni-spinner-arrow |
lni-spinner-solid |
lni-spinner |
lni-spotify-original |
lni-spotify |
lni-spray |
lni-sprout |
lni-squarespace |
lni-stackoverflow |
lni-stamp |
lni-star-empty |
lni-star-filled |
lni-star-half |
lni-star |
lni-stats-down |
lni-stats-up |
lni-steam |
lni-sthethoscope |
lni-stop |
lni-strikethrough |
lni-stripe |
lni-stumbleupon |
lni-sun |
lni-support |
lni-surf-board |
lni-suspect |
lni-swift |
lni-syringe |
lni-tab |
lni-tag |
lni-target-customer |
lni-target-revenue |
lni-target |
lni-taxi |
lni-teabag |
lni-telegram-original |
lni-telegram |
lni-text-align-center |
lni-text-align-justify |
lni-text-align-left |
lni-text-align-right |
lni-text-format-remove |
lni-text-format |
lni-thought |
lni-thumbs-down |
lni-thumbs-up |
lni-thunder-alt |
lni-thunder |
lni-ticket-alt |
lni-ticket |
lni-tiktok |
lni-timer |
lni-tounge |
lni-train-alt |
lni-train |
lni-trash-can |
lni-travel |
lni-tree |
lni-trees |
lni-trello |
lni-trowel |
lni-tshirt |
lni-tumblr |
lni-twitch |
lni-twitter-filled |
lni-twitter-original |
lni-twitter |
lni-ubuntu |
lni-underline |
lni-unlink |
lni-unlock |
lni-unsplash |
lni-upload |
lni-user |
lni-users |
lni-ux |
lni-vector |
lni-video |
lni-vimeo |
lni-visa |
lni-vk |
lni-volume-high |
lni-volume-low |
lni-volume-medium |
lni-volume-mute |
lni-volume |
lni-wallet |
lni-warning |
lni-website-alt |
lni-website |
lni-wechat |
lni-weight |
lni-whatsapp |
lni-wheelbarrow |
lni-wheelchair |
lni-windows |
lni-wordpress-filled |
lni-wordpress |
lni-world-alt |
lni-world |
lni-write |
lni-xbox |
lni-yahoo |
lni-ycombinator |
lni-yen |
lni-youtube |
lni-zip |
lni-zoom-in |
lni-zoom-out |