1.
✈

2.
⚛

3.
⚛

4.
./templates/views-view-fields--articles--page.html.twig
{% embed "@molecules/cards/card.twig"
with {
"url": fields.path.content,
"title": fields.title.content,
"read_more": "Read more"|t,
"card_header": fields.created.content,
}
%}

5.
YAML
MY_MODULE.ui_patterns.yml MY_THEME.ui_patterns.yml
pattern
media
pattern_media
pattern-media.html.twig

6.
./themes/custom/MY_THEME/MY_THEME.ui_patterns.yml
blockquote:
label: Blockquote
description: Display a quote with attribution information
fields:
quote:
type: text
label: Quote
preview: Life is like riding a bicycle. To keep your balance, you must keep moving.
attribution:
type: text
label: Attribution
preview: Albert Einstein
./themes/custom/MY_THEME/templates/pattern-blockquote.html.twig
<blockquote>
<p>{{ quote }}</p>
<footer>{{ attribution }}</footer>
</blockquote>

7.
id
label description
fields
type label description preview
blockquote:
label: Blockquote
description: Display a quote with attribution information
fields:
quote:
type: text
label: Quote
preview: Life is like riding a bicycle. To keep your balance, you m

8.
preview
id: image
fields:
image_field:
...
preview:
theme: image
uri: http://lorempixel.com/350/250/nature/1
id: gallery
fields:
gallery_field:
...
preview:
type: pattern_preview
id: image

9.
theme hook
pattern_[id]
template
pattern_[id]
use
use: "@my_module/templates/my-template.html.twig"
use: "@molecules/media/media.html.twig"

10.
.
├── templates
│ └── patterns
│ ├── button
│ │ ├── button.ui_patterns.yml
│ │ └── pattern-button.html.twig
│ ├── media
│ │ ├── media.ui_patterns.yml
│ │ └── pattern-media.html.twig
...
│ └── pattern-jumbotron.html.twig
├── MY_THEME.info.yml
└── MY_THEME.ui_patterns.yml

11.
media:
label: Media object
...
libraries:
- core/jquery.ui.autocomplete
- my_module/my_library
- local_library:
css:
component:
media1.css: {}
http://example.com/style.css: { type: external }
...
└── patterns
└── media
├── media1.css
├── media.ui_patterns.yml
└── pattern-media.html.twig

12.
/**
* The YAML UI Pattern plugin.
*
* @UiPattern(
* id = "yaml",
* label = @Translation("YAML Pattern"),
* description = @Translation("Pattern defined using a YAML file."),
* deriver = "Drupalui_patternsPluginDeriverYamlDeriver"
* )
*/
class YamlPattern extends UiPatternBase implements UiPatternInterface
...
}

13.
/**
* The Fractal UI Pattern plugin.
*
* @UiPattern(
* id = "fractal",
* label = @Translation("Fractal"),
* description = @Translation("Pattern defined using Fractal."),
* deriver = "Drupalui_patternsPluginDeriverFractalDeriver"
* )
*/
class FractalPattern extends UiPatternBase implements UiPatternInterface
...
}

14.
/**
* The PatternLab plugin.
*
* @UiPattern(
* id = "pattern_lab",
* label = @Translation("PatternLab"),
* description = @Translation("Pattern defined using PatternLab."),
* deriver = "Drupalui_patternsPluginDeriverPatternLabDeriver"
* )
*/
class PatternLabPattern extends UiPatternBase implements UiPatternInterfa
...
}

15.
COMPONENT.ui_patterns.yml

16.
ui_patterns_layouts
ui_patterns_views
ui_patterns_ds
ui_patterns_field_group

17.
/articles