Component Library 2.3.12 (configured with Dummy App)
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<main>
  <section class="panel" data-content-cols="1" data-mobile-content-cols="1" data-panel-style="article-meta">
    <div class="container">
      <div class='breadcrumbs'>
        <a class="breadcrumb__link" href="/lookbook/">Home</a>
        <span class="material-symbols-outlined">keyboard_arrow_right</span>
        <a class="breadcrumb__link" href="/lookbook/articles">Articles</a>
        <span class="material-symbols-outlined">keyboard_arrow_right</span>
        <a class="breadcrumb__link" href="/lookbook/articles/example">Getting Started with Our Platform</a>
      </div>
      <div data-controller="published-date">
        15 June 2024
      </div>
    </div>
  </section>
  <section class="panel" data-panel-style="article-title">
    <div class="container">
      <h1>Getting Started with Our Platform</h1>
    </div>
  </section>
  <section class="panel" data-panel-style="multi-pattern" data-bgc="mono-light" data-content-cols="1" data-mobile-content-cols="1">
    <div class="container">
      <div class="panel__header">
      </div>
      <div class="text-card" data-layout-style="plain-text">
        <div class="text-card__body">
          <h2>Introduction</h2>
          <p>This is an example article showing how content panels compose within an article document.
            Articles typically have a body of rich text content followed by supporting media.</p>
          <h2>Key Points</h2>
          <ul>
            <li>Articles are composed of panels, just like pages</li>
            <li>The article layout adds published date metadata</li>
            <li>Content flows in a single-column reading layout</li>
          </ul>
        </div>
      </div>
      <div class='panel__patterns'>
      </div>
    </div>
  </section>
  <section class="panel" data-panel-style="multi-pattern" data-bgc="primary-light" data-content-cols="2" data-mobile-content-cols="1">
    <div class="container">
      <div class="panel__header">
        <h2 class="panel__title">Related Content</h2>
      </div>
      <div class='panel__patterns'>
        <div class="media-card" data-media-alignment="left" data-media-size="medium">  
          <div class="text-card" data-layout-style="nested">  
            <h3 class="text-card__title">Swimming Lessons</h3>
            <div class="text-card__body">
              <p>Learn to swim with qualified instructors in a friendly environment.</p>
            </div>
          </div>
          <div class="media-card__media">
            <img alt="Swimming pool" src="https://picsum.photos/seed/swimming/800/600" />
          </div>
        </div>
        <div class="media-card" data-media-alignment="left" data-media-size="medium">  
          <div class="text-card" data-layout-style="nested">  
            <h3 class="text-card__title">Gym & Fitness</h3>
            <div class="text-card__body">
              <p>State-of-the-art equipment and expert-led classes for all levels.</p>
            </div>
          </div>
          <div class="media-card__media">
            <img alt="Gym fitness" src="https://picsum.photos/seed/fitness/800/600" />
          </div>
        </div>
      </div>
    </div>
  </section>
</main>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
article = build_article(
  title: "Getting Started with Our Platform",
  published_at: "2024-06-15"
)
home = build_page(title: "Home", href: "/")
articles_page = build_page(title: "Articles", href: "/articles", home: false)
body_panel = GllComponentLibrary::Panels::PatternComponent.new(
  panel: build_pattern_panel(
    title: nil,
    body: <<~HTML,
      <h2>Introduction</h2>
      <p>This is an example article showing how content panels compose within an article document.
      Articles typically have a body of rich text content followed by supporting media.</p>
      <h2>Key Points</h2>
      <ul>
        <li>Articles are composed of panels, just like pages</li>
        <li>The article layout adds published date metadata</li>
        <li>Content flows in a single-column reading layout</li>
      </ul>
    HTML
    layout_content_cols: 1,
    layout_background_colour: "mono-light"
  )
)
cards = build_cards(count: 2)
related = GllComponentLibrary::Panels::PatternComponent.new(
  panel: build_pattern_panel(title: "Related Content", patterns: cards, layout_content_cols: 2)
)
render GllComponentLibrary::Documents::ArticleComponent.new(article:, breadcrumbs: [ home, articles_page, article ]) do |c|
  c.with_panel(panel: body_panel)
  c.with_panel(panel: related)
end

No notes provided.

No params configured.

No Figma design linked. Add @figma_node_id <id> (or @figma <url>) to the preview class or scenario docstring.