Zadat kód JIRA tasku pro generování odkazů na "feature stage":
{{ include('blesk/element/avatar.twig', { name: 'Karel Jan Novák', variant: 'image', imageSource: imageSource, size: 24 }) }}
{{ include('blesk/element/avatar.twig', { name: 'Karel Jan Novák', variant: 'initials', size: 24 }) }}
{{ include('blesk/element/button.twig', {
typographyText: 'Tlačítko',
size: 32,
variant: 'secondary',
prefixIcon: 'arrows/arrow-left',
attributes: { 'data-test-id': 'test' },
}) }}
{{ include('blesk/element/button.twig', {
typographyText: 'Tlačítko jako odkaz',
size: 28,
variant: 'tertiary',
suffixIcon: 'arrows/arrow-right',
attributes: { href: 'www.blesk.cz', target: '_blank' },
}) }}
{{ include('blesk/element/buttons-store.twig', { items: ['google','appStore'], direction: 'vertical' }) }}
include('blesk/element/form/form-alert-template.twig', {
title: 'Něco se pokazilo',
description: 'Zkuste to prosím znovu.',
})
include('blesk/element/form/form-input.twig', {
name: 'age',
textLabel: 'Věk obdarovaného',
textLabelConf: '18-sb',
placeholder: '25',
type: 'number',
})
include('blesk/element/form/form-radio.twig', {
name: 'priceLimit',
textLabel: 'Cenový limit',
textLabelConf: '18-sb',
isRequired: true,
options: [
{ value: 250, text: '250 Kč' },
{ value: 500, text: '500 Kč' },
{ value: 1000, text: '1000 Kč' },
{ value: 1500, text: '1500 Kč' },
{ value: 2000, text: '2000 Kč' },
{ value: 5000, text: '5000 Kč' }
],
})
include('blesk/element/form/form-textarea.twig', {
name: 'additionalInfo',
textLabel: 'Chcete uvést konkrétnější informace o obdarovaném?',
textLabelConf: '18-sb',
hintText: 'Napište nám něco o obdarovaném, co by mohlo být pro výběr dárku důležité.',
hintSupportingText: 'Lorem ipsum',
placeholder: 'Napište nám něco o obdarovaném, co by mohlo být pro výběr dárku důležité.',
isRequired: true,
maxLength: 400,
attributes: {
'data-additional-info': ''
}
})
include('blesk/element/hint.twig', {
text: 'Napište nám něco o obdarovaném, co by mohlo být pro výběr dárku důležité.',
supportingText: 'Lorem ipsum',
})
{{ include('blesk/element/icon.twig', { file: 'pocasi/jasno' }) }}
{{ include('blesk/element/icon.twig', { file: 'pocasi/jasno', inline: true }) }}
{{ include('blesk/element/label.twig', { text: 'Lorem ipsum' }) }}
{# Default #}
{% include('blesk/element/link.twig', { text: 'Toto je "default" odkaz', href: '/', suffixIcon: 'arrows/arrow-down' }) %}
{% include('blesk/element/link.twig', { text: 'Toto je "default" odkaz v disabled stavu', href: '/', suffixIcon: 'arrows/arrow-left', disabled: true }) %}
{% include('blesk/element/link.twig', { text: 'Odkaz s ikonami', href: '#', prefixIcon: 'arrows/arrow-up', suffixIcon: 'arrows/arrow-right' }) %}
{# Menu item #}
{% include('blesk/element/link.twig', { text: 'Odkaz na červeném pozadí', href: '#', type: 'menu-item' }) %}
{% include('blesk/element/link.twig', { text: 'Odkaz na červeném pozadí v disabled stavu', href: '#', type: 'menu-item', disabled: true }) %}
{{ include('blesk/element/loader.twig', {
size: 18,
variant: neutral-white,
}) }}
{{ include('blesk/element/logo.twig', { type: 'default' }) }}
include('blesk/element/object-titles.twig', {
superTitle: 'Lorem ipsum',
title: 'Lorem ipsum dolor sit amet',
})
include('blesk/element/super-title.twig', { typographyText: 'Lorem ipsum' })
include('blesk/element/tooltip.twig', {
trigger: 'Hover over me',
text: 'This is a tooltip',
supportingText: 'This is a supporting text',
position: 'top',
})
{{ include('blesk/element/typography.twig', { conf: '48-black uppercase underline italic', text: 'Lorem ipsum' }) }}
{# Mock data #}
{% set authors = ['Jan Novák', 'Petr Svoboda'] %}
{% set datePublished = '2024-05-06 14:30:00' %}
{% set dateUpdate = '2024-05-06 15:45:00' %}
{# Základní použití #}
{{ include('blesk/component/article/article-meta-data.twig', {
authors: authors,
datePublished: datePublished,
dateUpdate: dateUpdate
}) }}
Příklady URL
{{ include('blesk/component/article-card.twig', {
type: 2,
imageId: mockImageId,
superTitle: loremIpsumSuperTitle,
title: loremIpsumTitle,
href: mockHref,
attributes: {
'data-track-element-id': dataTrackElementId,
'data-track-list': gtmDataTrackList,
...
},
})
prostý text
prostý text
prostý text
prostý text
prostý text
prostý text
Prostý text
Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
Bold text
Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
Kurzíva text
Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
Zarovnání doleva
Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
Zarovnání dostředu
Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
Zarovnání doprava
Nunc auctor. Fusce tellus. Morbi scelerisque luctus velit. Curabitur bibendum justo non orci. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nunc auctor. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Etiam quis quam. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor.
Číselné odrážky
Bodové odrážky
Fotka ve článku
Jednoduchý odkaz na článek
Citát
{# Article - body typography #}
{% embed 'blesk/component/article/typography-wrapper.twig' %}
{% block typographyWrapper %}
{{ content.body }}
Lorem ipsum dolor sit amet
...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
...
{% endblock %}
{% endembed %}
{# Připravit data #}
{% set articleCards = [] %}
{% for article in content.items %}
{% set articleCards = articleCards | merge([{
imageId: article.id_img,
title: article.title,
superTitle: article.superTitle,
href: article.url,
nameForStats: name_for_stats,
articleFullSource: article,
}]) %}
{% endfor %}
{# Vypsat #}
{{ include('blesk/component/article-card-list.twig', {
articleCards: articleCards,
advertisementPositions: [4, 9, 11, 14, 16],
advertisementPositionsStack: {
4: 25,
9: 25,
11: 865,
16: 511
},
advertisementDefaultPlaceholder: 5,
}) }}
{{ include('blesk/component/banner/banner.twig', { content: 'blesk-zazrak-rubrika' }) }}
{{ include('blesk/component/breaking-news.twig') }}
{{ include('blesk/component/content-expander.twig', { content: loremIpsumLong }) }}
{% set mockLinks = [
{ text: 'Link 1', href: '#' },
{ text: 'Link 2', href: '#', suffixIcon: 'arrows/arrow-left', prefixIcon: 'arrows/arrow-right' },
{ text: 'Link 3 Blank', href: 'https://blesk.cz', blank: true },
{ text: 'Link 4 Disabled', href: '#', disabled: true },
{ text: '[divider]' },
{ text: 'Link 5', href: '#' }
] %}
{{ include('blesk/component/dropdown/dropdown.twig', {
uid: 'navigation-dropdown-left-example',
items: mockLinks,
}) }}
{% embed 'blesk/component/dropdown/dropdown.twig' with {
uid: 'navigation-dropdown-right-example',
items: mockLinks,
direction: 'right',
} %}
{% block targetOpener %}
{{ include('blesk/element/button.twig', {
typographyText: 'Otevřít modal do prava',
suffixIcon: 'arrows/arrow-right',
attributes: {
'aria-haspopup': 'true',
'aria-expanded': 'false',
'id': 'navigation-dropdown-right-example',
},
}) }}
{% endblock %}
{% endembed %}
{{ include('blesk/component/dropdown/dropdown-item.twig', {
typographyText: 'Dropdown item',
href: 'https://www.blesk.cz',
prefixIcon: 'arrows/arrow-right',
suffixIcon: 'arrows/arrow-left',
blank: true,
disabled: true
})
{{ include('blesk/component/dropdown/dropdown-social-sites.twig', { uid: 'atomic-list-dropdown-social-sites' }) }}
{% set mockItemLinks = [
{ text: 'Link 1', href: '#' },
{ text: 'Link 2', href: '#' },
{ text: 'Link 3 Blank', href: 'https://blesk.cz', blank: true },
{ text: 'Link 4 Disabled', href: '#', disabled: true}
] %}
{% set mockItems = [
{ title: 'O nás', links: mockItemLinks },
{ title: 'Kontakt', links: mockItemLinks },
{ title: 'Podmínky', links: mockItemLinks },
{ title: 'Ochrana osobních údajů', links: mockItemLinks },
] %}
{{ include('blesk/component/footer-link-list.twig', { links: mockLinks }) }}
Vyberte perfektní dárek pro své blízké během pár minut. Naše jednoduchá a intuitivní pomoc vám nabízí personalizované návrhy na základě zájmů a preferencí obdarovaného. Prozkoumejte různé kategorie, nastavte svůj rozpočet a objevte inspiraci, která potěší každého.
Neztrácejte čas hledáním! Ulehčete si výběr a vyberte dokonalý dárek ještě dnes!
{{ include('blesk/component/gifts-ai/gifts-ai.twig') }}
{% set mockLinks = [
{ text: 'Link 1', href: '#' },
{ text: 'Link 2', href: '#', suffixIcon: 'arrows/arrow-left', prefixIcon: 'arrows/arrow-right' },
{ text: 'Link 3 Blank', href: 'https://blesk.cz', blank: true },
{ text: 'Link 4 Disabled', href: '#', disabled: true}
] %}
{# Horizontální #}
{{ include('blesk/component/link-list.twig', { title: 'Test nadpis:', links: mockLinks }) }}
{# Vertikální #}
{{ include('blesk/component/link-list.twig', { links: mockLinks, direction: 'vertical', linkVariant: 'neutral-white' }) }}
{{- include('blesk/component/pagination.twig', {
paging: content.data.paging,
nextprev: content.data.nextprev,
buttonSize: 32,
}, ignore_missing = true, with_context = false) -}}
{{ include('blesk/component/social-icon-list.twig') }}
{% set swiperItems = [
{ title: 'Item 1', link: '#' },
{ title: 'Item 2', link: '#' },
{ title: 'Item 3', link: '#' },
...
] %}
{% embed 'blesk/component/swiper.twig' with { swiperName: 'Example Swiper' } %}
{% block swiperItems %}
{% for item in swiperItems %}
{{ include('blesk/element/button.twig', {
size: 36,
variant: 'tertiary-white',
typographyText: item.title,
attributes: {
'aria-label': item.title,
'href': item.link,
},
hasGtmDataTrackClick: true,
gtmDataTrackClick: {
'event': 'clickTo_swiper',
'menu': { 'type': 'example', 'section': 'Swiper' },
'link': { 'text': item.title, 'url': item.link },
},
}) }}
{% endfor %}
{% endblock %}
{% endembed %}
{{ include('blesk/component/widget-special.twig', {
title: mockSpecialTitle,
description: mockSpecialPerex,
buttonHref: mockSpecialHref,
articles: mockSpecialArticles,
})
{% set mockMenuItems = [] %}
{% for i in 1..15 %}
{% set mockMenuItems = mockMenuItems | merge([{ value: 'Menu Item ' ~ i, url: '#' }]) %}
{% endfor %}
{% set mockSpecialData = {
article: {
title: 'Category Header Title',
body: 'This is the description of the category header.'
},
unimenu: {
unimenu: {
menu_items: mockMenuItems
}
},
image: 'path/to/image.jpg'
} %}
{% set mockContent = { special_issue: { specialIssue: mockSpecialData } } %}
{{ include('blesk/component/category-header.twig', { content: mockContent }) }}
{{ include('blesk/component/media-meta-data.twig', {
isVisible: true,
showDescription: true,
mediaDescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.',
showAuthor: true,
mediaAuthors: 'Jan Novák' })
}}
{# Mock data #}
{% set galleryItems = [
{
id_gallery: '123',
object_id: '8976669',
description: 'První obrázek v galerii'
},
// ...další obrázky...
] %}
{# Základní použití #}
{{ include('blesk/artobj/article-body-gallery.twig', {
title: 'Galerie: Lorem ipsum dolor sit amet',
items: galleryItems,
galleryId: '123',
backUrl: 'https://www.blesk.cz',
}) }}
Social icon
{{ include('blesk/element/social-icon.twig', { socialNetworkId: 'facebook' }) }}