San Francisco Design System

Two Column Container 

<div class="sfgov-container-two-column">

    <div class="sfgov-container-item">
        <a class="sfgov-service-card" href="#service1">
            <h5 class="title">Service card 1</h5>
            <p class="description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum purus odio, ut dictum justo scelerisque ac. Quisque vitae nisl lectus. Morbi semper ante purus, eget porta magna eleifend at.
            </p>
        </a>

    </div>

    <div class="sfgov-container-item">
        <a class="sfgov-service-card" href="#service2">
            <h5 class="title">Service card 2</h5>
            <p class="description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum purus odio, ut dictum justo scelerisque ac.
            </p>
        </a>

    </div>

    <div class="sfgov-container-item">
        <a class="sfgov-service-card" href="#service3">
            <h5 class="title">Service card 3</h5>
            <p class="description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
        </a>

    </div>

    <div class="sfgov-container-item last ">
        <a class="sfgov-service-card" href="#service4">
            <h5 class="title">Service card 4</h5>
            <p class="description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
        </a>

    </div>

</div>
 
<div class="sfgov-container-two-column">
  {% for item in items %}
    <div class="sfgov-container-item{% if loop.last %} last {% endif %}">
      {% render '@service', item %}
    </div>
  {% endfor %}
</div>
 
{
  "items": [
    {
      "title": "Service card 1",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum purus odio, ut dictum justo scelerisque ac. Quisque vitae nisl lectus. Morbi semper ante purus, eget porta magna eleifend at.",
      "url": "#service1"
    },
    {
      "title": "Service card 2",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum purus odio, ut dictum justo scelerisque ac.",
      "url": "#service2"
    },
    {
      "title": "Service card 3",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "url": "#service3"
    },
    {
      "title": "Service card 4",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "url": "#service4"
    }
  ]
}
  • Handle: @two-column-container
  • Preview:
  • Filesystem Path: src/components/03-layout/containers/two-column-container/two-column-container.html
  • References (1): @service

There are no notes for this item.