new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

IBM Carbon · all subjects

vue-tutorial

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Vue component naming convention

To adhere to the Vue style guide, multi-word component names should be used. All @carbon/vue components have a 'cv' prefix to follow this convention.

InfoSection component structure

The InfoSection component wraps its content in a semantic <section> element with class 'cds--row info-section'. It accepts a 'heading' prop (String) and uses a slot to render child components. The heading uses 'heading-01' type style.

InfoCard component structure

The InfoCard component is wrapped in a <div> element with classes 'info-card', grid column classes (cds--col-md-4, cds--col-lg-4, cds--col-xlg-3), and an offset class (cds--offset-xlg-1 for extra large viewports). It accepts props: heading (String), body (String), and icon (Object). The heading is split to bold the last word using a computed property. The icon is rendered using the component dynamic element syntax.

InfoCard heading styling

The InfoCard heading uses the 'productive-heading-03' type style. The last word of the heading is wrapped in a <strong> tag to display it in bold.

InfoCard body styling

The InfoCard body text uses 'body-long-01' type style. It has margin-top of $spacing-06. The flex-grow: 1 property ensures icons are bottom-aligned. Between 321px and md breakpoint, max-width is set to 75% to prevent large line lengths.

InfoCard layout and spacing

InfoCard uses margin-top of $spacing-09 and display: flex with flex-direction: column. SVG icons have margin-top of $spacing-09. At md breakpoint and below, cards use top borders (1px solid $ui-03) with padding-top $spacing-09 on non-first items. At md breakpoint, odd children have left borders (1px solid $ui-03). At lg breakpoint and above, margin-top becomes 0, all items have left borders, and SVG margin-top changes to $layout-06.

Importing icons in Vue components

Icons should be imported from '@carbon/icons-vue' by their specific name and size (e.g., Globe32, PersonFavorite32, Application32). To pass icons as dynamic components via props, assign them to the component instance using Object.assign in the created() lifecycle method rather than adding them to the components property.

Semantic HTML for InfoCard

The InfoCard component should use a <div> element rather than <article>, because the <article> semantic element requires a label for accessibility compliance. Using <div> avoids accessibility violations.

Component file structure for InfoSection

Create an InfoSection folder in src/components containing: index.js (as entrypoint exporting both InfoSection and InfoCard), InfoSection.vue, and InfoCard.vue.

Component-specific vs page-specific classes

When abstracting markup to a component, use only Carbon (cds--) and component-specific class names. Page-specific class names should be passed in as properties to the component and not hardcoded in the component template.

Give your agent this brain