bootstrap_patterns.ui_patterns.yml

carousel:
  label: 'Carousel'
  description: 'A slideshow component for cycling through elements, like a carousel.'
  fields:
    slides:
      type: 'collection'
      label: 'Slides'
      description: 'Each slide is a collection of title, subtitle and slide image.'
      preview:
        -
          title: 'Vestibulum rutrum mi nec'
          subtitle: 'In ac felis quis tortor malesuada pretium. Aenean commodo ligula eget dolor.'
          image: 'http://lorempixel.com/900/500/sports/1'
        -
          title: 'Donec orci lectus'
          subtitle: 'Integer tincidunt. Ut a nisl id ante tempus hendrerit.'
          image: 'http://lorempixel.com/900/500/sports/2'
        -
          title: 'Quisque ut nisi'
          subtitle: 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.'
          image: 'http://lorempixel.com/900/500/sports/6'

jumbotron:
  label: 'Jumbotron'
  description: 'A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.'
  fields:
    title:
      type: 'text'
      label: 'Title'
      description: 'Jumbotron title.'
      preview: 'Hello, world!'
    subtitle:
      type: 'text'
      label: 'Description'
      description: 'Jumbotron description.'
      preview: 'This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.'
    link_label:
      type: 'text'
      label: 'Link label'
      description: 'Jumbotron link label.'
      preview: 'Learn more'
    link_url:
      type: 'text'
      label: 'URL'
      description: 'Jumbotron link URL.'
      preview: 'http://example.com'

modal:
  label: 'Modal'
  description: 'Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.'
  fields:
    title:
      type: 'text'
      label: 'Title'
      description: 'Modal title.'
      preview: 'Here is your modal title'
    body:
      type: 'text'
      label: 'Modal body'
      description: 'Modal description.'
      preview: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.'

card:
  label: 'Card'
  description: 'A card component.'
  fields:
    image:
      type: 'image'
      label: 'Image'
      description: 'Card image.'
      preview:
        type: 'pattern'
        id: 'image'
        fields:
          image:
            theme: 'image'
            uri: 'http://lorempixel.com/400/200/nature/2'
          caption: '© 2017 John Smith photography'

    title:
      type: 'text'
      label: 'Title'
      description: 'Card title.'
      preview: 'Card title'
    text:
      type: 'text'
      label: 'Text'
      description: 'Card text.'
      preview: 'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.'

image:
  label: 'Image'
  description: 'A simple image with caption.'
  fields:
    image:
      type: 'image'
      label: 'Image'
      description: 'The actual image.'
      preview:
        theme: 'image'
        uri: 'http://lorempixel.com/350/250/nature/1'
    caption:
      type: 'text'
      label: 'Caption'
      description: 'The image caption.'
      preview: '© 2017 John Smith photography'