kris/afv-library
1
0
Fork 0
mirror of https://github.com/forcedotcom/afv-library.git synced 2026-07-30 03:09:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
2c6aefabd7
afv-library/skills/design-systems-slds-apply/assets/blueprints/components/brand-band.yaml

199 lines
13 KiB
YAML
Raw Normal View History

feat: Release Skills Renaming by domain first convention @W-23187998@
2026-06-26 20:21:51 +08:00
name: Brand Band
description: A visual header component that displays branding elements, organizational identity, and context information,
typically positioned at the top of applications to establish brand presence and visual hierarchy.
category: Layout
slds_classes:
root: slds-brand-band
elements: []
modifiers:
- class: slds-brand-band_small
description: Small brand band height
usage: For compact brand display
- class: slds-brand-band_medium
description: Medium brand band height
usage: Standard brand band sizing
- class: slds-brand-band_large
description: Large brand band height
usage: For prominent brand display
- class: slds-brand-band_cover
description: Cover-style brand band
usage: For full-width background coverage
states: []
variants:
- name: Base
description: Standard brand band with basic branding
classes:
- slds-brand-band
usage_context: Default implementation for application branding
differences: Basic brand display with title and optional image
- name: Small
description: Compact brand band for minimal branding
classes:
- slds-brand-band
- slds-brand-band_small
usage_context: When space is limited or subtle branding is preferred
differences: Reduced height and compact layout
- name: Large
description: Prominent brand band for strong brand presence
classes:
- slds-brand-band
- slds-brand-band_large
usage_context: For landing pages or primary brand displays
differences: Increased height and prominent branding elements
- name: Cover
description: Full-width background brand band
classes:
- slds-brand-band
- slds-brand-band_cover
usage_context: For hero-style brand presentations
differences: Full-width background with overlay content
lightning_component:
name: lightning-brand-band
url: https://developer.salesforce.com/docs/component-library/overview/components
mapping_notes: Brand band functionality often implemented through custom header components or app branding
accessibility:
keyboard_support:
- Tab navigation through brand band interactive elements
- Focus management for brand band controls
screen_reader:
- Brand information properly announced
- Image alt text provided for brand images
- Brand context clearly communicated
aria_attributes:
- role='banner' for page header branding
- aria-label for brand context
- aria-describedby for additional brand information
usage_guidelines:
when_to_use:
- For establishing application or organizational branding
- When brand presence needs to be prominent
- In application headers and landing pages
- For organizational identity and context
when_not_to_use:
- In content areas where branding would be distracting
- For functional navigation (use navigation components)
- When minimal branding approach is preferred
best_practices:
- Keep branding consistent across application
- Ensure brand elements are accessible
- Use appropriate sizing for context
- Maintain brand guidelines and standards
- Consider responsive behavior
common_mistakes:
- Overusing brand elements throughout interface
- Poor contrast for brand text and images
- Inconsistent brand presentation
- Missing accessibility considerations
code_examples:
- title: Basic Brand Band
description: Standard brand band with logo and title
code: "<div class=\"slds-brand-band\" role=\"banner\">\n <div class=\"\">\n <div class=\"\">\n <div\
\ class=\"slds-media slds-media_center\">\n <div class=\"slds-media__figure\">\n <div class=\"\
\">\n <img src=\"/assets/images/logo.png\" alt=\"Company Logo\" style=\"height: 40px;\" />\n \
\ </div>\n </div>\n <div class=\"slds-media__body\">\n <h1 class=\"slds-text-heading_medium\"\
>\n Application Name\n </h1>\n <p class=\"slds-text-body_small slds-text-color_weak\"\
>\n Powered by Salesforce\n </p>\n </div>\n </div>\n </div>\n \
\ </div>\n </div>\n"
- title: Large Brand Band
description: Prominent brand band with additional controls
code: "<div class=\"slds-brand-band slds-brand-band_large\" role=\"banner\">\n <div class=\"slds-p-around_medium\"\
>\n <div class=\"\">\n <div class=\"slds-grid slds-grid_align-spread slds-grid_vertical-align-center\"\
>\n <div class=\"slds-col\">\n <div class=\"slds-media slds-media_center\">\n <div\
\ class=\"slds-media__figure\">\n <div class=\"\">\n <span class=\"slds-icon_container\
\ slds-icon_container_circle\" style=\"background-color: #1589ee;\">\n <svg class=\"slds-icon slds-icon_large\"\
\ aria-hidden=\"true\" style=\"fill: white;\">\n <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#sales_cloud\"\
></use>\n </svg>\n </span>\n </div>\n </div>\n\
\ <div class=\"slds-media__body\">\n <h1 class=\"slds-text-heading_large\">\n \
\ Sales Cloud\n </h1>\n <p class=\"slds-text-body_regular slds-text-color_weak\"\
>\n Enterprise Customer Relationship Management\n </p>\n </div>\n \
\ </div>\n </div>\n <div class=\"slds-col slds-no-flex\">\n <div class=\"\
\">\n <div class=\"slds-button-group\" role=\"group\">\n <button class=\"slds-button slds-button_neutral\"\
>\n Settings\n </button>\n <button class=\"slds-button slds-button_brand\"\
>\n Get Started\n </button>\n </div>\n </div>\n \
\ </div>\n </div>\n </div>\n </div>\n </div>\n"
- title: Small Brand Band
description: Compact brand band for minimal branding
code: "<div class=\"slds-brand-band slds-brand-band_small\" role=\"banner\">\n <div class=\"slds-p-horizontal_medium\
\ slds-p-vertical_small\">\n <div class=\"\">\n <div class=\"slds-media slds-media_center\">\n \
\ <div class=\"slds-media__figure\">\n <div class=\"\">\n <span class=\"slds-icon_container\"\
\ style=\"background-color: transparent;\">\n <svg class=\"slds-icon slds-icon_small\" aria-hidden=\"\
true\" style=\"fill: #0176d3;\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#salesforce1\"\
></use>\n </svg>\n </span>\n </div>\n </div>\n <div\
\ class=\"slds-media__body\">\n <h1 class=\"slds-text-heading_small\">\n Service Console\n\
\ </h1>\n </div>\n </div>\n </div>\n </div>\n </div>\n"
- title: Cover Brand Band
description: Full-width background brand band with overlay
code: "<div class=\"slds-brand-band slds-brand-band_cover slds-brand-band_large\" role=\"banner\" style=\"background: linear-gradient(135deg,\
\ #667eea 0%, #764ba2 100%); color: white;\">\n <div class=\"slds-p-around_large\">\n <div class=\"slds-text-align_center\"\
>\n <div class=\"slds-m-bottom_medium\">\n <span class=\"slds-icon_container slds-icon_container_circle\"\
\ style=\"background-color: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.3);\">\n <svg class=\"\
slds-icon\" aria-hidden=\"true\" style=\"fill: white;\">\n <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#marketing_cloud\"\
></use>\n </svg>\n </span>\n </div>\n <h1 class=\"slds-text-heading_large slds-m-bottom_small\"\
\ style=\"color: white;\">\n Marketing Cloud\n </h1>\n <p class=\"slds-text-body_regular\
\ slds-m-bottom_medium\" style=\"color: rgba(255,255,255,0.8);\">\n Drive personalized customer journeys at\
\ scale\n </p>\n <div class=\"\">\n <button class=\"slds-button slds-button_neutral\">\n\
\ Learn More\n </button>\n <button class=\"slds-button slds-button_brand slds-m-left_small\"\
>\n Start Free Trial\n </button>\n </div>\n </div>\n </div>\n </div>\n"
- title: Lightning Styled Brand Band
description: Brand band with Lightning Design System styling
code: "<div class=\"slds-brand-band slds-brand-band_medium\" role=\"banner\">\n <div class=\"slds-p-around_medium\"\
\ style=\"background-color: #f3f2f2; border-bottom: 3px solid #0176d3;\">\n <div class=\"\">\n <div class=\"\
slds-grid slds-grid_align-spread slds-grid_vertical-align-center\">\n <div class=\"slds-col\">\n \
\ <div class=\"slds-media slds-media_center\">\n <div class=\"slds-media__figure\">\n \
\ <div class=\"\">\n <span class=\"slds-icon_container\" style=\"background-color: #0176d3;\">\n\
\ <svg class=\"slds-icon\" aria-hidden=\"true\" style=\"fill: white;\">\n \
\ <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#lightning_component\"></use>\n </svg>\n\
\ </span>\n </div>\n </div>\n <div class=\"slds-media__body\"\
>\n <h1 class=\"slds-text-heading_medium\">\n Lightning Experience\n \
\ </h1>\n <p class=\"slds-text-body_small slds-text-color_weak\">\n Modern CRM\
\ Platform\n </p>\n </div>\n </div>\n </div>\n <div\
\ class=\"slds-col slds-no-flex\">\n <div class=\"\">\n <span class=\"slds-badge\">\n \
\ Beta\n </span>\n </div>\n </div>\n </div>\n </div>\n\
\ </div>\n </div>\n"
- title: Brand Band with Navigation
description: Brand band integrated with primary navigation
code: "<div class=\"slds-brand-band\" role=\"banner\">\n <div class=\"\">\n <div class=\"slds-p-around_medium\"\
\ style=\"border-bottom: 1px solid #e5e5e5;\">\n <div class=\"slds-grid slds-grid_align-spread slds-grid_vertical-align-center\"\
>\n <div class=\"slds-col\">\n <div class=\"slds-media slds-media_center\">\n <div\
\ class=\"slds-media__figure\">\n <div class=\"\">\n <img src=\"/assets/images/company-logo.svg\"\
\ alt=\"Company\" style=\"height: 32px;\" />\n </div>\n </div>\n <div class=\"\
slds-media__body\">\n <h1 class=\"slds-text-heading_small\">\n Customer Portal\n \
\ </h1>\n </div>\n </div>\n </div>\n <div class=\"slds-col\
\ slds-no-flex\">\n <nav class=\"\" aria-label=\"Primary navigation\">\n <ul class=\"slds-list_horizontal\
\ slds-has-dividers_right\">\n <li class=\"slds-list__item\">\n <a href=\"#dashboard\"\
\ class=\"slds-text-link\">Dashboard</a>\n </li>\n <li class=\"slds-list__item\">\n\
\ <a href=\"#cases\" class=\"slds-text-link\">Cases</a>\n </li>\n \
\ <li class=\"slds-list__item\">\n <a href=\"#account\" class=\"slds-text-link\">Account</a>\n \
\ </li>\n </ul>\n </nav>\n </div>\n </div>\n </div>\n\
\ </div>\n </div>\n"
dependencies:
css_files:
- brand-band.css
- grid.css
- media-object.css
javascript: []
icons:
- standard-sprite.svg
- utility-sprite.svg
other_components:
- button
- badge
- media-object
related_components:
- name: Global Header
relationship: similar
description: Similar header functionality
- name: Page Header
relationship: similar
description: Similar page-level header concept
- name: Global Navigation
relationship: depends-on
description: Often used together with navigation
references:
official_docs: https://v1.lightningdesignsystem.com/components/brand-band/
metadata:
version: 1.0.0
last_updated: '2025-11-12'
review_status: complete
notes: ' Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth.'
Reference in New Issue Copy Permalink