Example: create cards in views

Created on 31 January 2023, over 1 year ago
Updated 31 July 2023, 11 months ago

Based on Slack conversation.

Create view with cards that looks like

and have code

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>
✨ Feature request
Status

Needs work

Version

2.1

Component

Code

Created by

🇦🇺Australia VladimirAus Brisbane, Australia

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @VladimirAus
  • Status changed to Needs review 12 months ago
  • 🇮🇳India ravi kant Jaipur

    Creating cards from views.

    1. Add Image, title, body and updated fields.
    2. Exclude all above fields.
    3. Add "Custom text" filed.
    4. Copy the above code and past in Text section of "Custom text"
    5. Replace static content with fields pattern from Replacement-pattern
    6. save

    Add an outer 'row' class form unformatted format's settings
    Attaching screenshot for more clarifications.

  • Status changed to Needs work 12 months ago
  • 🇦🇺Australia VladimirAus Brisbane, Australia

    This requires bootstrap example.
    Moving to Bootstrap 5 module.
    Ideally,l we need bootstrap Example submodule with no custom text in the view.

  • 🇮🇳India ravi kant Jaipur

    @VladimirAus
    A module Views Bootstrap → is available.

Production build 0.69.0 2024