### Setup Assistant Card Header Example Source: https://v1.lightningdesignsystem.com/components/setup-assistant This snippet shows the basic HTML structure for the header of a card within the Setup Assistant component. ```html
``` -------------------------------- ### Dueling Picklist - Base Example Source: https://v1.lightningdesignsystem.com/components/dueling-picklist?variant=error A basic dueling picklist setup with two lists and move buttons. Includes instructions for keyboard interaction. ```html
``` -------------------------------- ### Global Header Setup Button Source: https://v1.lightningdesignsystem.com/components/global-header Implements the setup button in the global header, which triggers a dropdown menu. ```html

  • Walkthrough title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` -------------------------------- ### Walkthrough Popover - Micro Setup Source: https://v1.lightningdesignsystem.com/components/popovers?variant=base A minimal setup for a dark-themed walkthrough popover. This version is suitable for quick introductions. ```html ``` -------------------------------- ### Walkthrough Popover - Micro Setup Source: https://v1.lightningdesignsystem.com/components/popovers?density=comfy&modifiers=.slds-nubbin_left&variant=walkthrough A minimal setup for a dark-themed walkthrough popover with a left nubbin. Ideal for quick integrations. ```html ``` -------------------------------- ### Micro Setup Popover - Alternate Source: https://v1.lightningdesignsystem.com/components/popovers An alternative configuration for the micro setup popover, maintaining the dark theme and left nubbin. ```html ``` -------------------------------- ### Example package.json Source: https://v1.lightningdesignsystem.com/platforms/heroku A sample package.json file with 'server.js' as the entry point. ```json { "name": "demo_slds_heroku", "version": "0.0.0", "description": "demo_slds_heroku", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } ``` -------------------------------- ### Create Project Directory and Navigate Source: https://v1.lightningdesignsystem.com/platforms/heroku Use these commands to create a new directory for your project and change into it. ```bash $ mkdir demo_slds_heroku $ cd demo_slds_heroku ``` -------------------------------- ### Walkthrough Popover Source: https://v1.lightningdesignsystem.com/components/popovers Used for guiding users through a process or feature. This example shows a dark variant with a nubbin on the left. ```html ``` -------------------------------- ### Setup Assistant Card with Progress Source: https://v1.lightningdesignsystem.com/components/setup-assistant Illustrates the HTML structure for a Setup Assistant card that includes a descriptive progress bar to indicate overall completion. ```html
  1. ``` -------------------------------- ### Absolute Positioning Example Source: https://v1.lightningdesignsystem.com/utilities/position Use `.slds-is-absolute` to position an element relative to its closest ancestor with relative positioning. If no other positioning values are specified, it starts relative to its flow position. ```html
    An element with absolute positioning is positioned relative to its closest ancestor with relative positioning. If no other positioning values are given ( top, right, bottom, left) it will start its positioning relative to where it is in the flow of the page.
    ``` -------------------------------- ### Fixed Positioning Example Source: https://v1.lightningdesignsystem.com/utilities/position Use `.slds-is-fixed` to position an element relative to the viewport. The element's position is relative to the viewport, and if no other positioning values are specified, it starts relative to its flow position. ```html
    An element with fixed positioning is positioned relative to the viewport. If no other positioning values are given ( top, right, bottom, left) it will start its positioning relative to where it is in the flow of the page.
    ``` -------------------------------- ### Initialize npm Project Source: https://v1.lightningdesignsystem.com/platforms/heroku Initialize a new npm project. Ensure the entry point is set to 'server.js'. ```bash $ npm init ``` -------------------------------- ### Dueling Picklist Base Example Source: https://v1.lightningdesignsystem.com/components/dueling-picklist?variant=base This is the base HTML structure for a dueling picklist. It includes two lists with options and buttons for moving selections between them. Use this as a starting point for implementing the component. ```html
    ``` -------------------------------- ### Create Server File Source: https://v1.lightningdesignsystem.com/platforms/heroku Create the 'server.js' file in the root of your project. ```bash $ touch server.js ``` -------------------------------- ### Setup Assistant Base HTML Structure Source: https://v1.lightningdesignsystem.com/components/setup-assistant This snippet shows the basic HTML structure for a Setup Assistant list. It is used for simple lists of learning and task links that do not require progress tracking or sequential steps. ```html
    1. ``` -------------------------------- ### Chat Started Bookend Source: https://v1.lightningdesignsystem.com/components/chat HTML structure for a chat started bookend, indicating the start of a chat session with an icon and timestamp. ```html
      1 1 ``` -------------------------------- ### Install Express Dependency Source: https://v1.lightningdesignsystem.com/platforms/heroku Install the Express.js framework as a project dependency using npm. ```bash $ npm install express --save ``` -------------------------------- ### Install Pods and Open Workspace Source: https://v1.lightningdesignsystem.com/platforms/ios Install the specified pods and open the generated workspace file in Xcode. This workspace should be used for all future builds. ```bash $ pod install ``` -------------------------------- ### Install CocoaPods Source: https://v1.lightningdesignsystem.com/platforms/ios Install CocoaPods using RubyGems. This is a prerequisite for managing iOS dependencies. ```bash $ sudo gem install cocoapods ``` -------------------------------- ### Button Spacing Inline Start Hook Source: https://v1.lightningdesignsystem.com/components/buttons?modifiers=.slds-is-selected-clicked&variant=stateful Use this hook to control the inline start spacing for buttons. ```css `--slds-c-button-spacing-inline-start` ``` -------------------------------- ### Initialize Pods in iOS Project Source: https://v1.lightningdesignsystem.com/platforms/ios Create a Podfile in your iOS project directory to manage dependencies. Run this command in your project's root directory. ```bash $ pod init ``` -------------------------------- ### Button Spacing Block Start Hook Source: https://v1.lightningdesignsystem.com/components/buttons?modifiers=.slds-is-selected-clicked&variant=stateful Use this hook to control the block start spacing for buttons. ```css `--slds-c-button-spacing-block-start` ``` -------------------------------- ### Create Public Directory and Index HTML Source: https://v1.lightningdesignsystem.com/platforms/heroku Create the 'public' directory and an 'index.html' file within it. ```bash $ mkdir public $ touch public/index.html ```