logo
Digital Design System
git icon

Category Small Full Row 

<div class="container">
    <div class="row card-row">
        <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="../../msds-spritemap.svg#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Lorem ipsum dolor sit</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="../../msds-spritemap.svg#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum dotari gink</div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Amet consectetur</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="../../msds-spritemap.svg#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum, dolor sit amet consectetur adipisicin</div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Lorem, ipsum</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="../../msds-spritemap.svg#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="../../msds-spritemap.svg#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="../../msds-spritemap.svg#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="../../msds-spritemap.svg#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="../../msds-spritemap.svg#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
 
<div class="container">
    <div class="row card-row">
        <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="{{ path '/msds-spritemap.svg' }}#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Lorem ipsum dolor sit</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="{{ path '/msds-spritemap.svg' }}#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum dotari gink</div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Amet consectetur</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="{{ path '/msds-spritemap.svg' }}#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum, dolor sit amet consectetur adipisicin</div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Lorem, ipsum</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="{{ path '/msds-spritemap.svg' }}#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum dolor, sit amet consectetur adipisicing</div>
                    </div>
                </a>
            </div>
        </div>
        
       <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="{{ path '/msds-spritemap.svg' }}#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
                    </div>
                </a>
            </div>
        </div>      
        
         <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="{{ path '/msds-spritemap.svg' }}#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
                    </div>
                </a>
            </div>
        </div>     
        
          <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="{{ path '/msds-spritemap.svg' }}#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
                    </div>
                </a>
            </div>
        </div>     
        
          <div class="col-12 col-md-3">
            <div class="msds-category-card msds-category-card--small">
                <a class="msds-category-card__link" href="#" alt="msds-category-cards">
                    <div class="msds-category-card__header">
                        <div class="msds-category-card__header-body">Lorem, ipsum dolor</div>
                        <div class="msds-category-card__header-icon-container">
                            <svg class="msds-category-card__header-icon">
                                <use href="{{ path '/msds-spritemap.svg' }}#right-arrow" />
                            </svg>
                        </div>
                    </div>
                    <div class="msds-category-card__content">
                        <div class="msds-category-card__content-body">Lorem ipsum dolor sit amet</div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
 
/* No context defined for this component. */
  • Handle: @category-small-full-row
  • Preview:
  • Filesystem Path: components/button-cards/_category-card/category-small-full-row.hbs
  • Referenced by (1): @tab-tile

There are no notes for this item.