@visual-framework/vf-flag

    1.0.0-alpha.2 • Public • Published

    The Flag Layout Component

    npm version

    About

    The vf-flag layout component is for when you need an image, icon, or other media and text next to each other.

    Usage

    The vf-flag should, ideally, be used as part of a component with existing components for the media item and body area.

    You should use the vf-flag layout component when you need to display a media item (avatar, image, logo) next to or after text.

    The 'Flag Object', originally created by Harry Roberts is based on the work Nicole Sullivan did in creating the 'Media Object'.

    The vf-flag allows you to determine the vertical alignment of the media and body.

    As the layout component is relatively new there are no specific guidelines for when to use or not use the variants of this layout. Simply be consistent.

    Even though the vf-flag layout has a default spacing design token applied as a CSS custom property fallback it is good practice in the system to use and decalre the spacing CSS class name in your project. Also, you should define the vertical variant too.

    <div class="vf-flag vf-flag--middle vf-flag--400">...</div>

    <div class="vf-flag">...</div>

    <div class="vf-flag vf-flag--400">...</div>

    <div class="vf-flag vf-flag--middle">...</div>

    variant name description
    top aligns the media item and body to the top of the layout
    middle aligns the media item and body to the middle of the layout
    bottom aligns the media item and body to the bottom of the layout
    reversed switches the inline spacing *
    400 defines the spacing between the media item and body item as 1rem
    600 defines the spacing between the media item and body item as 1.5rem
    800 defines the spacing between the media item and body item as 2rem

    * The content for this variant needs to be switched so the media item follows the body

    Install

    This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-flag with this command.

    $ yarn add --dev @visual-framework/vf-flag
    

    Sass/CSS

    The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

    @import "@visual-framework/vf-flag/index.scss";
    

    Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

    Help

    Install

    npm i @visual-framework/vf-flag

    DownloadsWeekly Downloads

    464

    Version

    1.0.0-alpha.2

    License

    Apache 2.0

    Unpacked Size

    49.6 kB

    Total Files

    20

    Last publish

    Collaborators

    • pacope92
    • ebiwebdev
    • nitinja
    • sandykadam
    • khawkins98